下拉框选择后,失去焦点的JS实现

最新推荐文章于 2024-06-06 23:30:25 发布
最新推荐文章于 2024-06-06 23:30:25 发布
阅读量1w 收藏
点赞数
分类专栏： Jscript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITniao/article/details/4045118
版权

1.转移焦点 

<select   οnchange="document.body.focus()">  

 

2.blur方式(我没成功,可能是onChange中有多个事件.)

<select   name="prwhid"   onChange="this.blur();" >  

ITniao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js获取焦点和失去焦点操作（模仿京东搜索框）
m0_46069861的博客
07-23 610
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>DOM2</title> <meta name="viewport" content="width=device-width, initial-scale=1
JS失去焦点事件
06-11 6033
<br />失去焦点:<br />onblur="hanshu(this)"<br /><br />获得焦点:<br />onfocus="hanshu(this)"<br />{<br />      alert('请确认您输入格式是否正确！');<br />    }<br /> <br /> <br />//函数名：chksafe<br />//功能介绍：检查是否含有,//,/<br />//参数说明：要检查的字符串<br />//返回值：0：是  1：不是<br /><br />function c
web前端js实现一个下拉框的多选
最新发布
qq_45089709的博客
06-06 133
【代码】web前端js实现一个下拉框的多选。
html 下拉框失去焦点,如何通过js或vue.js使el-select的下拉列表隐藏或失去焦点？...
weixin_34515452的博客
06-05 1893
升级了最新大享上。是发了概开程态间些告人屏果会区。版本的elementUI使用blur方法就好使微和二第说，班。都年很过过事发工开宗定据发指互数个遍前互就了@keyup.right.native="keyUpRight(2,scope.$index)"v-model="scope.row.unconfirmLineCopy">keyUpRight(col, row) {//最后一行if (r...
js失去焦点触发
weixin_30389003的博客
01-25 478
onblur="displayRest($(this))" 转载于:https://www.cnblogs.com/xiaobiaomei/p/8350831.html
html 下拉框失去焦点,html如何使用失去焦点属性onblur
weixin_39981632的博客
06-05 885
在html中，onblur属性在元素失去焦点时触发。语法”，onblur经常用于Javascript验证代码，一般用于表单输入框。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。onblur属性在元素失去焦点时触发。常用于表单验证代码(例如用户离开表单字段)。说明：1、onfocus 属性与 onblur 属性是相反的。2、所有主流浏览器都支持 ...
js @blur失去焦点事件
weixin_45915769的博客
11-17 824
循环scoreForm中设置的prop，显示对应scroeFormProp输入框，@blur=“watchInputBlur”（v-on:简写成@）监听失去焦点事件。
BootStrap中关于Select下拉框选择触发事件及扩展
09-01
总之，通过监听`onchange`事件和使用`selectedIndex`和`value`属性，我们可以轻松地在Bootstrap的Select下拉框中实现选择触发的前端响应。当需要扩展更多功能时，可以考虑引入第三方库或者自定义更复杂的JavaScript...
原生js实现下拉框功能（支持键盘事件）
11-27
在本文中，我们将深入探讨如何使用原生JavaScript实现下拉框功能，并且支持键盘事件。首先，我们需要了解HTML中的`<select>`元素及其关联的`<option>`元素，它们是创建下拉列表的基础。在纯JavaScript环境中，我们不...
快速解决js开发下拉框中blur与click冲突
11-23
blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。 click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。 示例1：blur事件为表单事件 &...
用js设置下拉框为只读的小技巧
12-02
3. `onfocus`：当下拉框获得焦点时，立即调用`blur`方法，使它失去焦点，防止用户进行选择。 4. `onbeforeactivate`：在激活（如点击）事件发生前，返回false，阻止下拉框的激活。 最后，我们在`<body>`标签的`...
聚焦input框，显示下拉框
06-01
可以使用`blur`事件监听input框失去焦点的情况，同时添加一个全局的`click`事件来检测是否点击了非input和下拉框的区域： ```javascript $(document).ready(function() { $('#searchInput').on('focus', function...
jQuery实现监听下拉框选中内容发生改变操作示例
10-18
`change`事件在用户更改了表单元素（如输入框、复选框或下拉框）的值并失去焦点后触发。在这个例子中，我们关注的是下拉框`select`的`change`事件。 jQuery代码部分如下： ```javascript $(document).ready...
文本框获取焦点弹出下拉框
03-16
标题“文本框获取焦点弹出下拉框”涉及到的是网页交互设计中的一种常见功能，它通常用于实现输入框（input）的自动补全或者下拉选项选择。在Web开发中，这种功能可以极大提升用户体验，让用户能够快速找到并选择所需...
asp.net可输入可选择下拉框
03-25
2. **JavaScript/jQuery处理**：使用JavaScript或jQuery监听用户的输入事件，如键盘按下、失去焦点等，以便在输入和选择之间切换显示。同时，要处理下拉框的选项选择事件，确保当选中一个选项时，文本框的值与选中的...
js 下拉菜单点击旁边收起实现(踩坑记)
10-16
在实现这个功能时，开发者可能会首先想到使用`onBlur`事件来监听失去焦点的情况，以此达到收起的效果。然而，这样做可能会导致一些意想不到的问题，就像描述中所提到的那样。 首先，让我们分析一下带有bug的版本的...
javascript(三onblur事件　下拉菜单)
hewenjing8168的博客
06-05 2063
onblur事件：当用户离开一个字段并且未写入任何数据，该字段改变颜色html&lt;form action="#"&gt; email:&lt;input type="text" class="reqd"/&gt; name:&lt;input type="text"/&gt; css:&lt;style type="text/css"
js中的失去焦点与获取焦点
WiseGirls的博客
10-05 461
失去焦点与获取焦点的小案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
js 给input元素添加失去焦点事件
Rockandrollman的博客
08-10 3753
是一个示例 id，您需要将其替换为实际的 input 元素的 id，或者使用其他适当的方式来选择要添加事件的 input 元素。方法将失去焦点事件绑定到该元素上。在事件处理函数中，您可以编写处理逻辑，以响应 input 元素失去焦点时的操作。此外，您还可以使用类似的方法来绑定其他事件（如键盘事件、鼠标事件等），以根据需要执行相应的操作。要给一个 input 元素添加失去焦点（blur）事件，您可以使用 JavaScript 的。获取到具有指定 id 的 input 元素。在上述代码中，首先通过。
vu下拉框选择后按回车键实现搜索
05-31
好的，你可以在Vue的模板中使用一个`select`标签来实现下拉框，然后在它上面绑定一个`@change`事件，当用户在下拉框中选择一个选项时，就会触发这个事件，然后在这个事件处理函数中执行搜索操作。 接着，你可以在`select`标签上再绑定一个`@keyup.enter`事件，当用户在下拉框中选择一个选项后，按下回车键时，就会触发这个事件，然后在这个事件处理函数中也执行搜索操作。 具体代码如下： ```html <template> <div> <select v-model="selected" @change="search" @keyup.enter="search"> <option disabled value="">请选择</option> <option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option> </select> <!-- 显示搜索结果 --> <ul> <li v-for="(item, index) in searchResult" :key="index">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { selected: '', // 用户选择的选项 options: [ // 下拉框选项 { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' } ], searchResult: [] // 搜索结果 } }, methods: { search() { // 执行搜索操作，将搜索结果保存到searchResult数组中 // ... } } } </script> ``` 在上面的代码中，`@change`事件和`@keyup.enter`事件都绑定了`search`方法，当用户在下拉框中选择一个选项时或者在选中选项后按下回车键时，都会调用`search`方法。在`search`方法中，你可以执行搜索操作，并将搜索结果保存到`searchResult`数组中，然后在模板中使用`v-for`指令来遍历`searchResult`数组，将搜索结果显示出来。 注意，在`select`标签中，你需要添加一个`disabled`的`option`标签来让用户进行选择，这个选项不会被绑定到`selected`属性上。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值