el-input-number 失去焦点blur事件，

最新推荐文章于 2024-06-05 10:42:25 发布
最新推荐文章于 2024-06-05 10:42:25 发布
阅读量2.7k 收藏 4
点赞数 4
文章标签： vue.js 前端 javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52125118/article/details/130085867
版权

        最近遇到了个奇怪的需求，需要代码手动给数字输入框手动触发失焦事件；但是在看了 el-input-number 焦点事件部分的源码后，发现 el-input-number 只有获取焦点focus事件，却没有失去焦点的事件：

后来再阅读了 el-input-number的 template部分的源码后；发现el-input-number封装的el-input部分是由input绑定的ref属性：

 最后的解决方案是由$ref获取到的 el-input-number 实例 获取input组件实例去执行失去焦点blur事件，代码如下：

this.$refs.elInputNumber.$refs.input.blur()
我不后悔选了劫
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
快速解决js开发下拉框中blur与click冲突
11-23
blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。 click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。 示例1：blur事件为表单事件 &...
react-native-blur：React Native Blur组件
02-05
@react-native-community/blur 一种UIVisualEffectView的iOS上的模糊和活力的效果，和组件在Android上。 内容 安装 使用Yarn安装库： yarn add @react-native-community/blur 或npm： npm install --save @react-...
input输入限制
weixin_44868881的博客
09-01 938
输入大小写字母、数字、下划线： <input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"> 输入小写字母、数字、下划线： <input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');"> 输入数字和点 <input type="text" onkeyup="value=value.repla
VUE 表单input 框使用@blur事件
热门推荐
weixin_45861283的博客
10-20 3万+
** VUE 表单input 框使用@blur事件 input 框失去焦点 ,便会触发定义的方法 <el-form-item label="身份证号码：" prop="idNumber"> <el-input @blur="onBsp($event)" v-model="laApplicationDetail.idNumber" placeholder="身份证号码" maxlength="18" show-word-limit
elementUI input-number组件在blur处理完数据后，视图没改变问题修复
最新发布
qq_40122602的博客
06-05 194
推测，这个现象是由于输入框默认为1，然后处理完变量还是1，就没进行dom渲染 参考了https://blog.csdn.net/qq_53492819/article/details/133200755。问题：页面打开后，在输入框输入1.xx的小数，blur处理完绑定的变量被处理成1，但是输入框显示的还是1.xx。尝试在页面打开后，在输入框输入2.xx的小数，blur处理完变量变2输入框正常展示2。背景：使用按钮组展示变量按钮，并在按钮组后面加了输入框，允许输入更大的数。
vue -elementUI 输入框el-input 聚焦/失焦
DcTbnk的博客
04-23 7614
html 聚焦加v-focus，失焦加@blur <el-input v-model="scope.row.bcsl" v-focus size="small" auto-complete="off" @change="textChange(scope.$index, scope.row)" @blur="inputBlur" /> js 聚焦需----注册focus <script> ... export default { directives: { // 注册一个
【javascript】vue和elementui中的键盘事件，el-input-number输入框限制输入数据规则，只能输入正整数，禁止输入除正整数以外的其他字符
DecorateCC的博客
06-06 7971
keyup.native=“UpNumber” @keydown.native="UpNumber"这是一个Vue.js中的事件绑定语法，用于监听键盘按键事件。其中@keyup.native表示监听键盘松开事件，@keydown.native表示监听键盘按下事件，UpNumber是自定义的事件处理函数。首先要监听keyup（键盘按下）事件，因为elementUi上面的input组件监听事件是没有这个事件的，所以可能会报错，所以我们需要加个vue事件的修饰符 .native，代表原生事件的意思。
elementUI中input-number组件的坑
qq_40122602的博客
04-12 717
目前问题是输入非一百整数时会按四舍五入来纠正到最近的数值。于是尝试增加blur事件处理，但是还是会四舍五入。需求是一个输入框带加减按钮，步长为100，且输入非一百整数时，向下取整。排查下来发现要把step-strictly去掉，再增加blur。
解决el-table中使用el-input-number时，组件数值无法正常更新
heirui的专栏
02-08 1806
点击组件的 加 减 按钮时，发现数据无法更新，或者无法正常更新，每次只能点一两下，然后数值就不动了，而且它居然 还能影响其他行的组件。经测试问题也可以完美解决，不需要key/row-key设置，表格中prop、v-model也都正常操作就可以了。然后博主提供的解决方案是通过添加key属性来解决，我没试，我直接从数据源那里解决。说这个问题是因为“绑定的数据未刷新是vue的绑定深度过多，没有关联绑定起来”在cdsn看了一些相关文章，最后在这里看到一句话，
DIV的失去焦点(blur)实现方法
09-22
主要介绍了DIV的失去焦点(blur)实现方法,用防抖实现DIV鼠标移出消失,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
el-table树形表格表单验证(列表生成序号)
10-15
触发器`trigger`可以设置为`blur`（失去焦点时验证）或`change`（值改变时验证）等。 ### 三、总结 在处理树形表格的表单验证时，生成序号和使用`el-form`组件是两个关键步骤。序号用于标识表格中的特定行，方便...
easyui textbox失去焦点事件及获取文本框的内容
01-20
EasyUI文本框提供了多种事件，如blur、focus、change等，其中blur事件是指文本框失去焦点时触发的事件。我们可以通过在文本框的data-options中指定events属性来绑定blur事件，如：<input class="easyui-textbox" ...
element ui 的输入框el-input输入一个字后失去焦点，需重新点击下才能继续输入内容
lilyheart的博客
04-13 9043
该问题场景是，在el-dialog框中，嵌套了表单，在表单中使用el-input输入框时，发现输入一个字符后失去焦点不能在继续输入，需要重新点击输入框才能输入内容。部分代码如下： <el-form-item v-for="(item,index) in data" :key="item.label" :label="'名称'+index" :value="item.label" > <el-input v-model="item.labe
解决如何在点击按钮时，不触发input的失去焦点事件
weixin_56242672的博客
02-10 3325
el-input 是文本域类型，其绑定了失去焦点事件。el-button是提交按钮。当点击提交按钮时，目的是执行提交操作，但出现bug，变为执行了el-input的失去焦点事件，没有执行submit事件。
【Vue中的@blur@input事件解读】
qq_44712196的博客
09-22 2290
当输入框失去焦点时，触发blur事件，并调用Vue实例中的validateSingle方法对indexInfo.score进行验证，然后再调用getRightVal方法对其进行处理，确保它的值符合要求。：当输入框的值发生变化时，触发input事件，并调用Vue实例中的getRightVal方法来对indexInfo.score进行处理，确保它的值符合要求。示例代码中，当用户完成输入总分并且焦点移开时，对输入进行验证会触发@blur事件，会出现消息提示框——”请输入指标名“
el-input-number的focus失效
chedanquestion的博客
08-19 1382
因为业务需要每次按tab键切换到下一行，必须自动获得焦点才行，el-input-number是在el-table里的 ref是这样写的:ref='"yourref"+scope.$index' 自动获取焦点是这样写的 ++this.rowIndex let newIndex = this.rowIndex%this.list.length let refId = 'yourref'+newIndex this.$refs[refId].focus() 一直不成功，我以为是因为在el-table里的，后来试
elementui中的el-input-number只能输入数字
godming的博客
11-24 4539
1.需求是只能输入数字，输入框中不能有除数字外的文字 查询资料发现都说加这段代码 onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" 但是在火狐中输入框中仍然能输入除数字外的文字， 给el-input-number加input事件，因为是组件所以是@input.native： <el-input-number v-model="num" onKeypress="return (/[\d]/..
inputNumber选中状态如果被打断，会保存现状态，之后会回填状态。
m0_48367310的博客
08-18 285
inputNumber 在onblur的状态下，如果突然出现一个弹窗，这种时候会打断状态, 等弹窗消失，会重新保存当时的onblur 状态。 这种时候如歌弹窗的作用是修改input的值，等弹窗消失之后input的值就有可能出现怪异现象，可能会回到当时onblur的值。 解决这种现在现象，可以做一个全局监控， 满足条件之后，获取input框，然后失去焦点。 也可以使用ref , ref?.current.blur(); 失去焦点。 ...
a-input-number只能输入整数
09-06
你可以使用以下方法来实现只能输入整数的限制： 1. 使用 `<input type="number">` 元素，并添加 `step="1"` 属性，这将强制输入值只能以整数步长增加或减少。 ```html <input type="number" step="1"> ``` 2. 使用 JavaScript 来验证输入值是否为整数。可以通过在输入框失去焦点时触发事件来进行验证，并根据验证结果进行处理。 ```html <input type="text" id="inputNumber"> <script> var input = document.getElementById("inputNumber"); input.addEventListener("blur", function() { var value = parseInt(input.value); if (!isNaN(value) && Number.isInteger(value)) { // 值为整数，进行相应处理 } else { // 值不是整数，进行相应处理或给出错误提示 } }); </script> ``` 这些方法可以帮助你限制用户只能输入整数。你可以根据自己的需求选择其中一种或结合使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值