【JavaScript】事件监听:表单事件(下篇)

这篇具有很好参考价值的文章主要介绍了【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. 1.表单验证:在表单中的输入字段获取焦点时,可以使用focusin事件进行实时验证用户输入的内容是否符合要求。例如,当用户点击输入框时,检查输入内容是否为空或是否满足特定格式要求。
  2. 2.自动完成/建议功能:当用户在输入框中输入内容时,可以使用focusin事件触发自动完成或建议功能,根据用户输入的部分内容提供相关的选项或建议。
  3. 3.自定义样式效果:通过使用focusin事件,可以实现自定义的样式效果,以突出显示当前获得焦点的表单元素。例如,改变输入框的背景色、边框样式或添加阴影效果等。
  4. 4.表单元素交互:在一个表单中,当用户切换焦点到不同的输入字段时,可以使用focusin事件来根据当前焦点所在的字段,动态显示或隐藏其他相关的内容或元素。
  5. 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. 1.表单验证:在表单中的输入字段失去焦点时,可以使用focusout事件进行实时验证用户输入的内容是否符合要求。例如,当用户离开输入框时,检查输入内容是否为空或是否满足特定格式要求。
  2. 2.自动保存:当用户离开表单中的输入字段时,可以使用focusout事件来触发自动保存功能,将用户的输入内容保存到本地或远程服务器中,以防止数据丢失。
  3. 3.即时反馈:通过使用focusout事件,可以实现即时反馈功能,根据用户输入的内容或离开的字段,提供相关的反馈信息或显示验证结果。例如,在离开输入框时,检查输入内容的长度是否符合要求,并在页面上显示相应的提示。
  4. 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')来获取粘贴的文本内容,并通过弹出框提供反馈,显示用户粘贴的文本。

请注意,由于安全性限制,对剪贴板数据的访问可能受到限制,因此在某些浏览器中,可能无法获取到粘贴的文本内容。文章来源地址https://www.toymoban.com/news/detail-820867.html

到了这里,关于【JavaScript】事件监听:表单事件(下篇)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript——监听事件:点击鼠标,视频静音(原神官网)

    用JS实现视频的静音,可以实现如图按钮所有功能,时间也和视频同步,JS实现。 如图所示, 首先搭个结构 再来看看CSS样式表 最后事件监听要看JavaScript实现 原理: 代码: OK,以上步骤完成,功能即可实现

    2024年02月11日
    浏览(53)
  • JavaScript鼠标拖动事件监听使用方法及实例效果

    首先鼠标拖动事件需要与标签的 draggable属性配合使用,在标签中设置draggable属性为true则表示允许拖动该元素 鼠标拖动事件,当元素被拖动时该事件会持续重复触发,可以用于实时定位鼠标位置以让某元素跟随鼠标 当拖动开始时触发一次该事件,可以用于拖动前对元素进行一

    2024年02月05日
    浏览(37)
  • JavaScript中的代理和反射:实现数据绑定和事件监听

    在JavaScript中,代理(Proxy)和反射(Reflect)是两个重要的概念,它们可以用于实现数据绑定和事件监听等功能。在本文中,我们将会探讨代理和反射的概念,以及如何使用它们实现数据绑定和事件监听。 代理是一种能够截获并拦截对象访问的机制。它可以用于在对象上定义

    2023年04月10日
    浏览(41)
  • addEventListener is not a function , JavaScript添加监听事件时报错

    简介:在写JavaScript代码的时候,控制台有时候会遇到这样的报错, addEventListener is not a function ,说addEventListener不是一个函数,具体原因是因为监听事件的事件源不对,事件源应该是一个元素,而非其它。 因此我们在获取元素时要注意, getElementsByClassName()、 getElementByTagName

    2024年02月09日
    浏览(50)
  • [前端开发] 常见的 HTML CSS JavaScript 事件

    代码示例指路 常见的 HTML、CSS、JavaScript 事件代码示例 在 Web 开发中,事件是用户与网页交互的重要方式之一。通过事件,用户可以与页面元素进行交互,触发相应的功能或效果。本文将介绍常见的 HTML、CSS、JavaScript 事件,以及事件对象和事件代理的概念。 鼠标事件 鼠标事

    2024年02月19日
    浏览(53)
  • JavaScript 的初步学习下篇

    创建函数/函数声明/函数定义 函数名(实参列表) // 不考虑返回值 返回值 = 函数名(实参列表) // 考虑返回值 注: 函数定义并不会执行函数体内容, 必须要调用才会执行. 调用几次就会执行几次. js 中定义和调用的顺序是不做要求 可以先定义,再调用; 也可以先调用,再定义. 1.先定义

    2024年02月04日
    浏览(34)
  • 开发语言漫谈-JavaScript

           JavaScript、Java名字很相近,但它们没有任何亲缘关系,是由不同公司开发的编程语言。Java由Sun公司(后被Oracle收购)开发,JavaScript最初是由Netscape公司开发的(当年浏览器的霸主)。JavaScript最初的名字是 LiveScript,Netscape将其命名为 JavaScript,无非是蹭 Java流量。当

    2024年04月16日
    浏览(48)
  • JavaScript (五) -- JavaScript 事件(事件的绑定方式)

    目录 1.  JavaScript 事件的概述: 2.  事件的绑定(两种方式):         JavaScript事件是 指当网页中某个元素被触发时,可以执行一些JS代码来处理这个事件 ,例如鼠标单击、鼠标移动、键盘按键等。事件通常被认为是浏览器与用户交互的方式之一。       

    2024年02月03日
    浏览(50)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包