JavaScript表单事件(下篇)
目录
八、keydown: 当用户按下键盘上的任意键时触发。
九、keyup: 当用户释放键盘上的键时触发。
十、keypress: 当用户按下键盘上的字符键时触发。
十一、focusin: 当表单元素或其子元素获得焦点时触发。
十二、focusout: 当表单元素或其子元素失去焦点时触发。
十三、cut: 当用户剪切文本框或文本区域中的文本时触发。
十四、copy: 当用户复制文本框或文本区域中的文本时触发。
十五、paste: 当用户粘贴文本到文本框或文本区域时触发。
承接上篇内容，我们继续来说一下JavaScript常见的表单事件
八、keydown: 当用户按下键盘上的任意键时触发。
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: 当用户释放键盘上的键时触发。
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: 当用户按下键盘上的字符键时触发。
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: 当表单元素或其子元素获得焦点时触发。
focusin事件在JavaScript中用于响应表单元素获取焦点的操作，包括表单元素本身以及其子元素。它与focus事件类似，但是具有冒泡特性，会在子元素获得焦点时也触发。
当使用JavaScript的focusin事件时，可以在以下几个场景中发挥作用：
- 1.表单验证：在表单中的输入字段获取焦点时，可以使用focusin事件进行实时验证用户输入的内容是否符合要求。例如，当用户点击输入框时，检查输入内容是否为空或是否满足特定格式要求。
- 2.自动完成/建议功能：当用户在输入框中输入内容时，可以使用focusin事件触发自动完成或建议功能，根据用户输入的部分内容提供相关的选项或建议。
- 3.自定义样式效果：通过使用focusin事件，可以实现自定义的样式效果，以突出显示当前获得焦点的表单元素。例如，改变输入框的背景色、边框样式或添加阴影效果等。
- 4.表单元素交互：在一个表单中，当用户切换焦点到不同的输入字段时，可以使用focusin事件来根据当前焦点所在的字段，动态显示或隐藏其他相关的内容或元素。
- 5.键盘快捷键：使用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>
十二、focusout: 当表单元素或其子元素失去焦点时触发。
当使用JavaScript的focusout事件时，可以在以下几个场景中发挥作用：
- 1.表单验证：在表单中的输入字段失去焦点时，可以使用focusout事件进行实时验证用户输入的内容是否符合要求。例如，当用户离开输入框时，检查输入内容是否为空或是否满足特定格式要求。
- 2.自动保存：当用户离开表单中的输入字段时，可以使用focusout事件来触发自动保存功能，将用户的输入内容保存到本地或远程服务器中，以防止数据丢失。
- 3.即时反馈：通过使用focusout事件，可以实现即时反馈功能，根据用户输入的内容或离开的字段，提供相关的反馈信息或显示验证结果。例如，在离开输入框时，检查输入内容的长度是否符合要求，并在页面上显示相应的提示。
- 4.输入协助：当用户离开输入字段时，可以使用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: 当用户剪切文本框或文本区域中的文本时触发。
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: 当用户复制文本框或文本区域中的文本时触发。
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: 当用户粘贴文本到文本框或文本区域时触发。
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')来获取粘贴的文本内容，并通过弹出框提供反馈，显示用户粘贴的文本。
请注意，由于安全性限制，对剪贴板数据的访问可能受到限制，因此在某些浏览器中，可能无法获取到粘贴的文本内容。