目录
十一、focusin: 当表单元素或其子元素获得焦点时触发。
十二、focusout: 当表单元素或其子元素失去焦点时触发。
十四、copy: 当用户复制文本框或文本区域中的文本时触发。
十五、paste: 当用户粘贴文本到文本框或文本区域时触发。
承接上篇内容，我们继续来说一下JavaScript常见的表单事件
keydown事件在用户按下键盘上的任意键时触发，它适用于需要对键盘输入进行实时响应的场景。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>按键检测</title>
</head>
<body>
<input type="text" id="myInput" placeholder="按下任意键查看键码" />
<script>
var input = document.getElementById('myInput');
input.addEventListener('keydown', function(event) {
// 在按键按下时执行特定的操作
var keyCode = event.keyCode;
console.log('按下的键码：', keyCode);
});
</script>
</body>
</html>
在上述例子中，我们监听了文本输入框的keydown事件，并在事件处理函数中获取了按下的键码。通过event.keyCode属性，我们可以获得当前按下的键盘键码。在这个例子中，我们简单地在控制台输出了按下的键码。你可以根据具体需求，在keydown事件中添加自定义的操作，例如根据不同的键码执行不同的逻辑，处理特殊按键或快捷键等。
keyup事件在用户释放键盘上的任意键时触发，它适用于需要对键盘输入进行实时响应的场景。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>按键检测</title>
</head>
<body>
<input type="text" id="myInput" placeholder="松开任意键查看键码" />
<script>
var input = document.getElementById('myInput');
input.addEventListener('keyup', function(event) {
// 在按键释放时执行特定的操作
var keyCode = event.keyCode;
console.log('释放的键码：', keyCode);
});
</script>
</body>
</html>
在上述例子中，我们监听了文本输入框的keyup事件，并在事件处理函数中获取了释放的键码。通过event.keyCode属性，我们可以获得当前释放的键盘键码。在这个例子中，我们简单地在控制台输出了释放的键码。你可以根据具体需求，在keyup事件中添加自定义的操作，例如根据不同的键码执行不同的逻辑，处理特殊按键或快捷键等。
keypress事件在JavaScript中用于响应键盘按键的按下和持续按压操作，适用于表单输入和处理用户按键的场景。以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>表单键盘事件</title>
</head>
<body>
<form>
<input type="text" id="myInput" placeholder="在文本框中输入内容" />
<button type="button" id="myButton">点击我</button>
</form>
<script>
var input = document.getElementById('myInput');
var button = document.getElementById('myButton');
input.addEventListener('keypress', function(event) {
// 按下键盘时实时响应
console.log('按键编码：', event.keyCode);
console.log('按键字符：', String.fromCharCode(event.keyCode));
});
button.addEventListener('click', function() {
// 获取文本框中的值并进行操作
var value = input.value;
console.log('文本框的值：', value);
});
</script>
</body>
</html>
在这个例子中，我们在表单中的文本输入框上监听了keypress事件。每当用户按下键盘上的任意键时，事件处理函数会实时响应，并输出按键的编码和对应的字符。我们使用event.keyCode获取按键的编码，并使用String.fromCharCode(event.keyCode)将编码转换为对应的字符。
此外，我们还在表单中的按钮上监听了click事件。当用户点击按钮时，事件处理函数会获取文本框中的值，并进行操作。你可以根据实际需求，将按钮的点击操作替换为其他自定义的逻辑。
focusin事件在JavaScript中用于响应表单元素获取焦点的操作，包括表单元素本身以及其子元素。它与focus事件类似，但是具有冒泡特性，会在子元素获得焦点时也触发。
当使用JavaScript的focusin事件时，可以在以下几个场景中发挥作用：
以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>表单焦点事件</title>
</head>
<body>
<form>
<input type="text" id="myInput" placeholder="输入姓名" />
</form>
<script>
var input = document.getElementById('myInput');
input.addEventListener('focusin', function() {
console.log('表单元素获取焦点');
input.style.backgroundColor = 'lightblue';
});
input.addEventListener('focusout', function() {
console.log('表单元素失去焦点');
input.style.backgroundColor = 'white';
});
</script>
</body>
</html>
当使用JavaScript的focusout事件时，可以在以下几个场景中发挥作用：
下面是一个简单的例子，演示了如何使用focusout事件验证输入框中的内容是否为空：
<!DOCTYPE html>
<html>
<head>
<title>Focusout Event Example</title>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" required>
<button type="submit">Submit</button>
</form>
<script>
const nameInput = document.getElementById('name');
nameInput.addEventListener('focusout', function(event) {
if (nameInput.value.trim() === '') {
alert('Name field cannot be empty!');
}
});
</script>
</body>
</html>
在上述例子中，当用户离开输入框（name字段）时，focusout事件被触发。在事件处理程序中，我们检查输入框中的值是否为空，如果为空，则弹出提示框提醒用户输入姓名。这样可以实现对输入内容的即时验证。
cut事件在表单中的使用场景通常涉及到对用户剪切文本的操作进行处理或提供反馈。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>Cut Event Example</title>
</head>
<body>
<input type="text" id="input-field" placeholder="Enter text to cut">
<script>
const inputField = document.getElementById('input-field');
inputField.addEventListener('cut', function(event) {
const cutText = event.clipboardData.getData('text/plain');
alert(`You have cut the text: ${cutText}`);
});
</script>
</body>
</html>
在上述例子中，我们创建了一个输入框（<input>元素），当用户剪切（cut）输入框中的文本时，cut事件会被触发。在事件处理程序中，我们使用event.clipboardData.getData('text/plain')来获取剪切的文本内容，并通过弹出框提供反馈，显示用户剪切的文本。
注意，cut、copy、paste事件均会在文本被剪切/复制/粘贴之前触发，因此可以在事件处理程序中获取到文本内容，并进行进一步的处理或提供相应的反馈。
copy事件在表单中的使用场景通常涉及到对用户复制文本的操作进行处理或提供反馈。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>Copy Event Example</title>
</head>
<body>
<input type="text" id="input-field" placeholder="Enter text to copy">
<script>
const inputField = document.getElementById('input-field');
inputField.addEventListener('copy', function(event) {
const copiedText = inputField.value.substring(inputField.selectionStart, inputField.selectionEnd);
alert(`You have copied the text: ${copiedText}`);
});
</script>
</body>
</html>
在上述例子中，我们创建了一个输入框（<input>元素），当用户复制（copy）输入框中的文本时，copy事件会被触发。在事件处理程序中，我们使:用:inputField.value.substring(inputField.selectionStart, inputField.selectionEnd)
来获取被复制的文本内容，并通过弹出框提供反馈，显示用户复制的文本。
paste事件在表单中的使用场景通常涉及到对用户粘贴文本的操作进行处理或提供反馈。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>Paste Event Example</title>
</head>
<body>
<input type="text" id="input-field" placeholder="Paste text here">
<script>
const inputField = document.getElementById('input-field');
inputField.addEventListener('paste', function(event) {
const pastedText = event.clipboardData.getData('text');
alert(`You have pasted the text: ${pastedText}`);
});
</script>
</body>
</html>
在上述例子中，我们创建了一个输入框（<input>元素），当用户粘贴（paste）文本到输入框中时，paste事件会被触发。在事件处理程序中，我们使用event.clipboardData.getData('text')来获取粘贴的文本内容，并通过弹出框提供反馈，显示用户粘贴的文本。
请注意，由于安全性限制，对剪贴板数据的访问可能受到限制，因此在某些浏览器中，可能无法获取到粘贴的文本内容。