首页 > 其他分享 >按回车处理输入框失去焦点

按回车处理输入框失去焦点

时间:2023-08-31 19:55:25浏览次数:35  
标签:焦点 失去 输入框 回车 blur 光标

一、现象

1、光标聚集输入框时需要获取原始值

2、在输入框进行数据调整

3、输入失去焦点时进行输入前后的数据进行对比处理,得出相差的值

4、按回车(enter)键或是鼠标作用光标失去焦点时进行数据处理

5、输入框绑定了获得、失去光标和回车事件, 如下(element-ui组件):

<el-input
    v-model="value"
    @keyup.enter.native="doEnter"
    @focus="doFocus"
    @blur="doBlur"
></el-input>

  

二、解决

1、获得光标方法

doFocus () {
  // todo focus      
}

2、回车方法

doEnter (e) {
  e.target.blur()  
}

3、失焦方法

doBlur () {
  // todo blur  
}

 

三、总结

e.target.blur() 会触发已绑定的失焦方法





 

标签:焦点,失去,输入框,回车,blur,光标
From: https://www.cnblogs.com/waitingbar/p/17670308.html

相关文章

  • el-input出发回车事件时会导致页面刷新
    原因分析:当表单只有一个文本框时,按下回车将会触发表单的提交事件,导致页面的刷新。1:el-input上使用回车事件<el-inputv-model="input"@keyup.enter.native="search1">解决方法一:在el-form表单加上@submit.native.prevent<[email protected]><el-inputv-......
  • 证券型代币成为新焦点!交易上链,合规也要上链?
       “数字化正在使传统行业的边界变得模糊,这是一场真正的金融革命。”麦肯锡早在2017年的《在没有边界的世界中竞争》报告中就以此形容了数字化浪潮。随着对虚拟资产的全球接受度增加,监管机构也开始对其潜力展开讨论。    当代币被视为金融工具时,证券型代币成为各国监管机构......
  • 去掉IE和Firefox点击链接时的焦点虚线框
    当你把链接定义成一个漂亮的触发按钮时,它不再需要按下时简陋的虚线框来帮助识别了,即碍眼又破坏设计的美感,这时就该干掉虚线框!IE里需要在 a 标签中加入 hidefocus=”true” 属性:<a href=”” hidefocus=”true” title=””>siteface</a>而在Firefox等浏览器中定义CSS:a { o......
  • js_中文输入法情况下, 输入框v-model绑定值中没有输入值但却触发input事件的问题
    中文输入法情况下,输入框v-model绑定值中没有输入值但却触发input事件的问题今天写的一个搜索框,要求输入字符时不作处理,直到用户点击搜索按钮时才执行搜索逻辑;当用户将搜索框文本删除至空字符串时,执行一次无搜索值的搜索逻辑,用于将表格数据恢复至无筛选;在这个功能......
  • 在登陆界面实现按回车后登录
    概述主要有三种实现方式在<body>属性中添加代码:添加JS绑定在定义了type=submit按钮标签下,使用@keyup.enter="submit"具体实现方式:一、在<body>属性中添加代码onkeydown="if(event.keyCode===13)document.all.login.click()"二、添加JS绑定<script>$(d......
  • 数据窗口单元格中输入值后直接保存时提示未输入,需要点击两次才能保存,这是输入值没有按
    解决办法:在保存事件起始位置判断IFdw_1.AcceptText()=-1ordw_2.AcceptText()=-1ThenReturn-1//将控件内容置于系统缓存区IFdw_1.of_updatespending()+dw_2.of_updatespending()=0thenReturn0//两个数据窗口没改变直接退出(改变时=1) ......
  • Vue【原创】千位符输入框(不仅只是过滤器哦)
    最近和一个做金融的朋友讨论到千位符输入的问题,后来一想貌似自己项目中也会经常碰到金额数字这种输入框,要么自己做一个吧。首先肯定要有一个正则表达式,也就是过滤器的方案里面常用的正则:1filters:{2_toThousandFilter(str,that){3returnthat._toN......
  • Black Hat USA 2023落幕回顾——安全AI成为关注焦点,漏洞利用衍生新议题。
    如何成为最跟得上潮流的黑客高手?  =ToDoList= 第一步:打开电脑的浏览器第二步:输入网址— blackhat.com跳转!第三步:阅读学习BlackHat2023的全部演讲 ……等等!这个BlackHat,是何方神圣?作为网络安全业界的“奥斯卡”黑帽大会BlackHat可谓是最知名的年度盛会这里......
  • WPF输入框验证
    WPF使用ValidationRule进行数据绑定验证1.xaml代码如下:<Windowx:Class="WpfApp1.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"......
  • Web_PHP_DedeCMS_文章编辑时,回车不换行问题解决;
    解决:在include\ckeditor目录下找到config.js文件,进行如下设置就好:config.autoParagraph=false;config.enterMode=CKEDITOR.ENTER_P;config.shiftEnterMode=CKEDITOR.ENTER_BR;这样每个段落会隔开,在浏览器中查看文章时,会用<p>段落标志,再加上段落样式缩进两字text-indent:......