input失去焦点和获得焦点jquery焦点事件

最新推荐文章于 2024-06-21 16:11:55 发布
最新推荐文章于 2024-06-21 16:11:55 发布
阅读量1.1k 收藏
点赞数
分类专栏： 基础知识 资源 文章标签： html input focus

input失去焦点和获得焦点jquery焦点事件插件，
鼠标在搜索框中点击的时候里面的文字就消失了。

我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件，因为懒，每次都去写非常的烦，于是就一劳永逸，遇到类似情况就来调用一下就OK 了

相关js代码:

1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>input失去焦点和获得焦点jquery焦点事件插件 - 懒人建站</title>
5 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(document).ready(function(){
8 //focusblur
9 jQuery.focusblur = function(focusid) {
10 var focusblurid = $(focusid);
11 var defval = focusblurid.val();
12 focusblurid.focus(function(){
13 var thisval = $(this).val();
14 if(thisval==defval){
15 $(this).val("");
16 }
17 });
18 focusblurid.blur(function(){
19 var thisval = $(this).val();
20 if(thisval==""){
21 $(this).val(defval);
22 }
23 });
24
25 };
26 /*下面是调用方法*/
27 $.focusblur("#searchkey");



28 });
29 </script>
30 </head>
31
32 <body>
33 <form action="" method="post">
34 <input name="" type="text" value="输入搜索关键词" id="searchkey"/>
35 <input name="" type="submit" id="searchbtn" value="搜索"/>
36 </form>
37 <p>input失去焦点和获得焦点jquery焦点事件插件，<br/><strong style="color:#F00">鼠标在搜索框中点击的时候里面的文字就消失了</strong>。</p>
38
39 </body>
40 </html>
风车巨人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
input标签事件总结（vue、H5），获取焦点失去焦点实时监听事件
start_sea的博客
07-31 3万+
input标签事件总结（vue、H5） 一、在Html中input标签的相关事件写法： 1、onfocus（常用） input标签获取焦点事件 2、onblur（常用） input失去焦点事件（触发条件：先获取焦点，再失去焦点触发） 3、onchange input失去焦点并且它的value值发生变化时触发 4、oninput input框输入过程中value值改变时实时触发，及没输入一个字符都会触发 5、onclick input标签type="button"时的点击事件 6、onkeydown inpu
jquery获取焦点和失去焦点事件代码
01-21
input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面的文字就消失了。 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点...input失去焦点和获得焦点jquery焦点事件插件 – 懒人建站</title> <scrip
input的焦点事件
weixin_30467087的博客
02-18 205
<body> <h3>表单中文本框的focus和blur事件</h3> <input id="txtest" type="text" value="" /> <div></div> <script type="text/javascript"> (function(){ var html=do...
el-input输入框添加失去焦点事件
最新发布
vue+iview 动态渲染表格（vue.js结合iview插件）
06-21 622
【代码】el-input输入框添加失去焦点事件。
input失去焦点，获取焦点等的几个事件
zhiyuya的博客
08-01 1142
$(document).ready(function(){ //获取焦点事件 $("input").focus(function(){ }); //失去焦点事件 $("input").blur(function(){ }); //实时搜索 $('input').bind('input porpertychange',function(){ co..
Input输入框 @blur / @focus 获取 / 失去焦点事件
weixin_57422253的博客
10-19 1446
Input输入框获取/失去焦点时触发@focus / @blur 事件。
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
10-27
本文将讨论如何使用jQuery来实现一个常见的功能：当`input`输入框获得焦点时隐藏默认文字，失去焦点且未输入内容时恢复默认文字。 首先，传统的实现方式是在HTML标签中直接内联JavaScript事件处理函数，例如`...
jquery实现input框获取焦点的方法
10-20
下面小编就为大家带来一篇jquery实现input框获取焦点的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery实现input框获取焦点的简单实例
10-20
2. **选择器和DOM操作**：在事件处理函数中，`$(this)` 指代当前触发事件的元素，即获得或失去焦点的输入框。`closest` 方法用于找到离当前元素最近的匹配指定类名的祖先元素。在这个例子中，我们希望找到输入框的...
关于input的焦点事件
liudanyang_21的博客
08-31 2986
关于input的焦点事件 $(".scanf_integral").focus(function(){//获取焦点//获取焦点后触发的事件 }) $(".scanf_integral").blur(function(){ //失去焦点//失去焦点后触发的事件}; //实时获取值时 需在input上接上这个函数，例： <input type="text" value="8000" oninput="scanf_integral (event)" onpropertychange="scanf_in.
JavaScript_input框中失去焦点事件和点击事件冲突的解决办法
QiuRenBB的博客
09-07 1万+
前言：   在开发的过程中，我们经常会有搜索的需求，其中就涉及到的知识点就包括了今天我们要说的两个重要“角色”，input框和展示列表的li。 需求：   当我们在input框中输入内容时，展示列表能够渲染出模糊查找到对应的内容。这时，当input框失去焦点的时候，我要让展示列表隐藏或消失，而且我还想点击对应的展示列表中的li时，能够将对应li的值赋值给input。 问题：   那么问题来了，当我点击li的时候，也就意味着input失去了焦点，我还没有选中并拿到li中的值给input，展示列表就先一步隐藏或
js 给input元素添加失去焦点事件
Rockandrollman的博客
08-10 3907
是一个示例 id，您需要将其替换为实际的 input 元素的 id，或者使用其他适当的方式来选择要添加事件的 input 元素。方法将失去焦点事件绑定到该元素上。在事件处理函数中，您可以编写处理逻辑，以响应 input 元素失去焦点时的操作。此外，您还可以使用类似的方法来绑定其他事件（如键盘事件、鼠标事件等），以根据需要执行相应的操作。要给一个 input 元素添加失去焦点（blur）事件，您可以使用 JavaScript 的。获取到具有指定 id 的 input 元素。在上述代码中，首先通过。
jquery 给input元素添加失去焦点事件
Rockandrollman的博客
08-10 1082
在事件处理函数中，您可以编写处理逻辑，以响应 input 元素失去焦点时的操作。您可以根据实际情况修改选择器，以选择特定的 input 元素。例如，对于具有特定类的 input 元素，可以使用。此外，您还可以使用类似的方法来绑定其他事件（如键盘事件、鼠标事件等），以根据需要执行相应的操作。要给一个 input 元素添加失去焦点（blur）事件，您可以使用 jQuery 的。标签中，或者放置在外部的 JavaScript 文件中，以确保正确的执行。请注意，您需要将上述代码放置在您的 HTML 文件中的。
input框的失去焦点事件onblur与下拉框的点击事件click冲突
qq_52937529的博客
02-28 969
input框的失去焦点事件与列表的click事件冲突，导致未触发click事件
input框，焦点事件
weixin_48009560的博客
04-21 437
直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; font-size: 25px; } .red{ color: red; } .green{
【杂记】（input获取焦点失去焦点、获取input中输入的值、 键盘事件、js事件、Math 属性、手机自适应meta定义、 去掉input内置阴影、图片居中、去蓝色默认背景、点击去掉默认边框）
Khun_HWJ的博客
10-31 3641
1. input获取焦点失去焦点 input：focus{border：1px red solid；} 获取焦点 .focus()失去焦点.blur() 2. 获取input中输入的值 <input id="test" name="test" type="text"/> $("#test").val() $("input[name='test']").val() $("input[t...
jquery 输入框失去焦点时 (blur)事件
热门推荐
qq_27361945的博客
05-08 3万+
jquery判断input输入框的值，用到input事件，blur事件，focus事件需求：当输入框有字或者正在输入时，右边的圆形取消按钮才出现。否则不出现。 //输入框正在输入时 $("#ipt").on('input',function(){ if(!($('#ipt').val()=='')){ ...
jquery input失去焦点事件
03-16
jQuery中的input失去焦点事件可以使用blur()方法来实现。当input元素失去焦点时，会触发blur()方法，可以在该方法中编写相应的代码来处理失去焦点事件。例如： $("input").blur(function(){ // 处理失去焦点事件的代码 });
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值