说说 input 输入框的事件

最新推荐文章于 2025-04-07 14:54:54 发布

Just Easy Life

最新推荐文章于 2025-04-07 14:54:54 发布

阅读量1.4w

点赞数 7

分类专栏： JavaScript

本文链接：https://blog.csdn.net/hrbsfdxzhq01/article/details/86629293

版权

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文详细解析了输入框从获取焦点到失去焦点过程中的一系列事件，包括onfocus、onkeydown、onkeypress、onkeyup、oninput、onchange和onblur的特点及触发时机。探讨了各事件在键盘输入操作中的作用，以及它们之间的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、从input框获取焦点到，输入值，失去焦点这个过程所有事件，以及一些特点；

过程：onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup -> oninput -> 失去焦点 -> onchange -> onblur

注意： onchange 事件并不是每次输入框值改变的时候触发的，而是在失去焦点时候，并且在 onblur 之前触发；oninput则是改变时时触发

<label for="testInput">用户名：</label>
<input type="text" name="username" id="testInput" value="张三" onfocus="handleFocus(event)" />

<script>
  //这种方式必须传参数event
  function handleFocus (event) {
    //onfocus事件 value=张三 keyCode=undefined
    console.log('onfocus事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
  };

  var input = document.getElementById("testInput");

  //这种方式可以不写event
  input.onkeydown = function () {
    console.log('onkeydown事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
  }

  input.onkeypress = function () {
    console.log('onkeypress事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
  }

  //这里获取到value要加上摁下之后的了
  input.onkeyup = function (event) {
    console.log('onkeyup事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
  }

  /*
  * 当用户向 <input> 中尝试输入时触发
  * 该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
  * 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。
  * 另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
  * oninput 事件是 IE 之外的大多数浏览器支持的事件，在 value 改变时触发，实时的，即每增加或删除一个字符就会触发，然而通
    过 js 改变 value 时，却不会触发。
  * oninput 事件失效情况：a). 当脚本中改变 value 时，不会触发；b).从浏览器的自动下拉提示中选取时，不会触发。
  * */
  input.oninput = function (event) {
    console.log('oninput事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
  }

  //onchange 事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发。
  input.onchange = function (event) {
    console.log('onchange事件...', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
  };

  input.onblur = function (event) {
    console.log('onblur事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode)
  }

</script>

oninput事件在处理type='file'上传图片时，获取到的event.value = 'C:\fakepath\pictureoriginname.jpg' 这样的格式

2、说说这些事件

　　onfocus

　　　　并没有什么特别的，就是当焦点转移到（点击，tab切换） input 框上边的时候触发；

　　onkeydown

　　　　键盘按下的时候触发，但是此时按下的值并没有被输入到 input ，所以，此时的 value 没有值，或者说它的值只能是之前的旧值

　　　　另外，此时可以阻止按键的默认事件；

　　 onkeypress

　　　　按键在按下之后，并且是按键松开之前触发的；

　　　　和 keydown 一样不能获取新的到 value；此时，也可以阻止按键的默认事件；

　　　　但是这个事件对一下按键的支持不好，一些非输入性质的按键（如；delete, backspare）不支持；（除enter）；

　　oninput