DOM input 事件 值发生变化时触发

最新推荐文章于 2024-03-07 16:40:01 发布
最新推荐文章于 2024-03-07 16:40:01 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： html5 文章标签： DOM input事件 change事件 值发生变化时触发 contenteditable
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hsl0530hsl/article/details/88315482
版权

input事件当<input>、<select>、<textarea>的值发生变化时触发。对于复选框（<input type=checkbox>）或单选框（<input type=radio>），用户改变选项时，也会触发这个事件。另外，对于打开contenteditable属性的元素，只要值发生变化，也会触发input事件。

input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。

input事件对象继承了InputEvent接口。

该事件跟change事件很像，不同之处在于input事件在元素的值发生变化后立即发生，而change在元素失去焦点时发生，而内容此时可能已经变化多次。也就是说，如果有连续变化，input事件会触发多次，而change事件只在失去焦点时触发一次。

下面是例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom Input Event</title>
</head>
<body>
    <label>Text: <input type="text" id="text"/></label>
    <br>
    //label[for='sel']{'Select:'}+select#sel[name='sel']>option[value=$]{$}*5
    <label for="sel">Select:</label>
    <select name="sel" id="sel">
        <option
最低0.47元/天 解锁文章
雾里看花叹朦胧
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM-Input标签
shenyinglijie的博客
10-21 795
input标签radio类型选中 input数据验证结果 input是日期类型的效果 input获取值+设定值 radioButton选中 //将radioButton的name为test，value为0的input标签设置选中。 input[name="test"][value="0"].attr("checked","checked"); input标签数据验证 下面是验证无效加css效果（例子是红色3px的边框），当input标签为空，或者为0-99以外的值时，input会有一个3px的红色边框.
Dom实现input的焦点触发
m0_48639378的博客
06-29 582
Dom实现input的焦点触发,鼠标单击框后文字消失，鼠标点击页面空白处，文字恢复
input内容改变的触发事件
热门推荐
段占彪的博客
11-26 2万+
onchange 定义和用法 onchange 事件会在域的内容改变时发生。 onchange 事件也可用于单选框与复选框改变后触发的事件。 语法 HTML 中: &amp;amp;amp;amp;lt;input onchange=&amp;amp;amp;quot;SomeJavaScriptCode&amp;amp;amp;quot;&amp;amp;amp;amp;gt; JavaScript 中: object.onchange=func
每天一个js功能小demo---点击按钮，input里的值发生变化
Laohei0101的博客
10-10 974
今天的小demo是当我点击按钮的时候,input中的值发生变化 如上图所示，当我点击按钮之后，input中的值变为被选中了。 代码执行思路 1、需要获取两个操作的元素，一个是button按钮，一个是input 2、获取元素之后需要给button添加一个点击事件，当执行这个点击事件的时候，input里的value值变为被选中了 3、上代码直接检验 <body> <button>按钮</button> <input type="text" value='
输入框的三种触发事件
头发丝儿还在的博客
11-19 5900
输入框的几种触发事件对比
input事件 input框输入过程中value值改变时触发 js写法
qq_70020706的博客
11-29 3884
input事件 input框输入过程中value值改变时触发 js写法
jquery中如何在input值输入完，响应事件
最新发布
qq_39951524的博客
03-07 768
这段代码会在页面加载完成后自动运行。当id为"myInput"的input元素的值被修改（通过用户输入或其他操作）时，就会触发change事件。然后，代码会获取input元素的新值并进行比较，最后根据结果来展示相应的信息。
Vue v-for中的 input 或 select的值发生改变时触发事件操作
10-14
- `oninput`：实时触发，每当输入框内的值发生变化时都会触发。 5. **Vue中强制更新视图** - 在某些情况下，当你修改了数据但视图没有及时更新时，可以使用`this.$forceUpdate()`方法强制Vue重新渲染组件。然而，...
当文本框的值发生改变时，触发事件，在IE中有效
09-05
当文本框的`value`属性发生变化时，`handle`函数会被调用。`handle`函数用于更新消息区域（`msg`）的内容，显示当前文本框的值。 2. **其他现代浏览器**（例如Firefox、Chrome、Safari等）： 非IE浏览器通常遵循...
jquery实现input输入框实时输入触发事件代码
12-04
在本例中，我们探讨的是如何使用 jQuery 来实现在输入框(input)中实时输入时触发特定事件的功能。这对于构建动态交互的用户界面，如搜索建议、实时验证或数据过滤等场景非常有用。 首先，让我们分析提供的代码： 1...
模拟用户操作Input元素，不会触发相应事件
10-30
为了防止恶意脚本自动触发事件，从而可能引发安全风险或者用户体验问题，浏览器默认情况下只允许由用户的直接交互来触发这些事件。换句话说，只有当用户直接与页面进行交互时（比如点击鼠标或敲击键盘），相关的事件...
input 内容改变的触发事件
MaQuanXin的博客
06-28 1227
input 内容改变的触发事件 onchange onchange 事件会在域的内容改变时触发。支持的标签, , ,。 注意：在元素的值改变了且失去焦点时触发（两次的值一样不会触发）。 缺陷：通过js代码改变DOM的值不会触发，解决在js代码里改值了调用其change 的function() 或者调.change()方法。 JS： <input type="text" id="cc" o...
input标签内容改变触发的事件
weixin_33937913的博客
11-19 624
原生方法 onchange事件 <input type="text" onchange="onc(this)"> function onc(data){ console.log(data.value); } onchange事件在内容改变且失去焦点的时候触发。即，失去焦点了内容未变不触发，内容变了未失去焦点也不实时触发...
html中dom的可编辑属性（contenteditable）用法
yangyi
05-10 1302
1、contenteditable使用 contenteditable作为dom元素的可编辑属性，默认为false，当需要一个非input的标签需要编辑时只需设置该dom的contenteditable值为true即可。 //eg: <style type="text/css"> .box{ width: 400px; height: 100px; padding: 10px; background: #00B0F0; color: #FF0000; }
DOM节点操作
王陈锋的博客
01-21 1467
1、DOM结构及节点 整个HTML的结构都可以由类似上图的树结构表示，整个树结构由节点组成 document对象指代整个文档节点, 它是文档内其他节点的访问入口，提供了操作其他节点的方法 节点可以分为元素节点、文本节点和属性节点 节点之间有层级关系，父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点，同级的子节点被称为同胞（兄弟或姐妹） 2、常用节点获取方法和属性 要进行DOM操作，首先要获取到需要操作的节点或
DOM change 事件
雾里看花叹朦胧
03-08 1822
change事件当、、的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，另一方面input事件必然伴随change事件。具体来说，分成以下几种情况。 激活单选框（radio）或复选框（checkbox）时触发。 用户提交时触发。比如，从下列列表（select）完成选择，在日期或文件输入框完成选择。 当文本框或元素的值发生改变，并且丧失焦点时触发。 下...
contenteditable 元素删掉所有内容后再输入内容，v-model变量不能监听内容变化
slashNie的博客
03-28 431
const range = window.getSelection() // 创建range。contenteditable 属性true元素删掉所有内容后再输入内容，v-model变量不能监听内容变化。contenteditable 属性规定元素内容是否可编辑（元素会从其父元素继承该属性。// range 选择obj下所有子内容。dom.focus() // 元素聚焦。// 光标聚焦在文字最后。解决：用v-html绑定元素内容。true： 可以编辑。false： 不可编辑。
DOM事件类型详解
s13166803785的博客
12-13 944
一、表单事件： input事件当<input>、<textarea>的值发生变化时触发。此外，打开contenteditable属性的元素，只要值发生变化，也会触发input事件。input事件的一个特点，就是会连续触发，比如用户每次按下一次按键，就会触发一次input事件。 select事件当在<input>、<textarea>中选中文本时触发。 Change事件当<input>、<select>、<textarea>的
JS 判断input标签值变化
weixin_45830165的博客
04-16 7920
JS 判断input标签值变化（三种方式） 1、onchange 监听 input 值变化 （1）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效） （2）当前对象失去焦点(onblur)； inputs.onchange = function(){ console.log(inputs.value); } 运行结果：只有对象失去焦点时，才会打印 input 的值 2、onpropertychange 监听 input 值变化 只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；
el-input中clear如何不触发click事件
08-20
### 回答1： 在 el-input 组件中，clear 按钮是被作为 el-input 的内容，并且触发 click 事件是通过监听 el-input 上的 click 事件实现的。 如果你想在点击 clear 按钮时不触发 el-input 的 click 事件，你可以使用事件冒泡的特性来解决。事件冒泡指的是，当一个元素的事件被触发时，这个事件会先从这个元素开始向外传播，依次冒泡到它的父元素、祖先元素等。 所以，你可以在 clear 按钮的 click 事件处理函数中调用 event.stopPropagation() 方法，来阻止事件冒泡。这样，当 clear 按钮被点击时，el-input 的 click 事件就不会被触发。 示例代码如下： ``` <template> <el-input v-model="value" @click="onInputClick" clearable @clear="onClearClick"></el-input> </template> <script> export default { data() { return { value: '', }; }, methods: { onInputClick() { console.log('Input clicked'); }, onClearClick(event) { console.log('Clear clicked'); // 阻止事件冒泡 event.stopPropagation(); }, }, }; </script> ``` 在上面的代码中，当 clear 按钮被点击时，onClearClick 方法会被调用，在这个方法中调用了 event.stopPropagation() 方法来阻止事件冒泡，所以 el-input 的 click 事件不会被触发。 ### 回答2： 在el-input组件中，clear属性是用来控制清除输入框内容的按钮是否显示的。默认情况下，点击clear按钮会触发click事件，但是我们可以通过一些方法来禁止触发click事件。 方法一是利用event.stoplPropagation()方法。我们可以在click事件的回调函数中加入event.stopPropagation()，这样当点击clear按钮时，事件会被阻止冒泡，从而不会触发click事件。 方法二是利用@click.native事件。我们可以使用@click.native事件来替代click事件，这样clear按钮点击时不会触发click事件。@click.native事件是一个特殊事件，它绑定的是原生DOM事件，而不是组件内部的自定义事件。 下面是一个示例代码，演示了如何禁止在el-input中的clear按钮点击时触发click事件： ```html <el-input v-model="inputValue" clearable @click.native="handleClick"> </el-input> ``` ```javascript methods: { handleClick(event) { event.stopPropagation(); // 阻止click事件冒泡 // 其他处理逻辑 } } ``` 以上就是如何在el-input中的clear按钮不触发click事件的方法。通过停止事件冒泡或使用@click.native事件，我们可以自定义清除按钮的点击行为。 ### 回答3： el-input中的clear属性是一个清除输入框内容的功能，当点击清除按钮时，会触发一个click事件。如果希望清除内容时不触发click事件，可以通过一些方法来实现。 第一种方法是使用自定义指令。通过自定义指令可以对el-input进行一些自定义操作，包括对click事件的控制。可以使用v-on指令监听click事件，并在事件处理函数中判断清除按钮是否被点击。如果是通过点击清除按钮触发的click事件，则不执行相应的逻辑。 第二种方法是通过事件修饰符。可以在清除按钮点击事件的处理函数中加入修饰符，如.stop，用来阻止事件冒泡。这样就可以确保清除按钮的点击事件不会触发父元素的click事件，从而避免不必要的操作。 第三种方法是通过自定义组件。可以基于el-input组件创建一个新的组件，并在新组件中对clear按钮点击事件进行定制。可以通过修改el-input组件的源码或者使用插槽来实现。 总而言之，要实现el-input中clear不触发click事件，可以使用自定义指令、事件修饰符或者自定义组件等方法进行控制。具体的实现方式可以根据实际情况选择合适的方法来处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值