jQuery-focus()和blur()方法-文本框单击字体消失及移开灰色显示

最新推荐文章于 2022-11-03 17:43:05 发布
原创 最新推荐文章于 2022-11-03 17:43:05 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#function #input

本文详细介绍了如何使用jQuery实现输入文本框的自动提示功能，包括焦点切换时的提示文字变化和失去焦点时的默认提示恢复。

<input type="text" id="in" name="us" value="关键字" />

$(document).ready(function(){
  $("#in").focus(function(){
   if($("#in").val()=='关键字'){
   $("#in").val("")};
  }).blur(function(){
   if($("#in").val()==''){
   $("#in").val("关键字").css("color","#ccc")};
  });
 });

这在搜索文本框中可以起到提示作用

jQuery-选择器-筛选器-元素增加删除-属性样式-事件-动画-插件
weixin_57218747的博客
05-12 1535
jQuery 一 jQuery 的基础 1.1 jQuery 的版本 不同的开发版本 jquery.js 开发版（不压缩） jquery.min.js 产品版（压缩过） jquery.slim.js 简化版（去掉了动画功能和ajax功能） https://www.bootcdn.cn/ 版本号 1.x.x 兼容IE6~IE8 2.x.x 和 3.x.x 需要 IE9 以上浏览器支持 1.2 如何使用 jQuery 需要把 jQuery 文件导入到 html 中，自己写的 js 代码需要在 jQuery
jQuery笔记
彳亍
11-28 745
1. 简介jQuery是一个JavaScript库，它通过封装原生的JavaScript函数得到一整套定义好的方法。优点： 操作起来非常方便 浏览器的兼容性很好 有大量基于jQuery的插件 1.1. 代码风格在jQuery中，不管是页面元素的选择还是内置功能函数的使用，都是用美元符号“$”来起始的。$(function(){ }); //执行一个匿名函数 $('#box');
文本框点击时文字消失，失去焦点时文字出现!
mumu5love1的专栏
12-26 1220
 http://www.w3.org/TR/html4/strict.dtd">                     文本框点击时文字消失，失去焦点时文字出现                                          function addListener(element,e,fn){              if(element.addEven
input 每输入一次都会失去焦点需要再次点击才能输入
improvement
08-17 4577
input 每输入一次都会失去焦点需要再次点击才能输入 1.情况描述，就是一个input框输入之后就会自动失去焦点，我需要再次点击获取焦点之后才可以进行下一次输入，并且还是只能输入一次就立马又失去焦点，当然这个input框是循环出来的，具体代码如下： <div class="input-area" v-for="item in inviteeInfoList" :key="item.phone" >
HTML中输入框添加提示文字并且点击消失
热门推荐
moubenmao的专栏
07-06 1万+
1、如果在输入框本身设定value值的话，判断起来有诸多不便，而且获的焦点后清空还是判断为空都会很复杂。 2、所以采用一种简单的方式，写一个独立的>放提示信息，把这个div的位置浮到输入框里。然后写一个点击事件函数，如果点击这个div就让输入框 获得焦点然后清空div。 3例子， 关键字 onclick="inputClick()">${ ! empty office.key
js实现input文本框点击时文字消失，失去焦点时文字出现
u011425213的专栏
08-08 1586
另一种 此功能主要是给用户在搜索输入关键字的时候，给用户一个友好的提示。很实用的代码，主要是onclick(点击)和onblur(失去焦点)两个事件.具体代码如下：(注意：js代码要放到页面的最下面)                   function addListener(element,e,fn){    if(e
jQuery-focus()和blur()方法-文本框单击字体消失及移开灰色显示 学习笔记七
lansky07
11-28 165
程序如下： &lt;input type="text" id="in" name="us" value="关键字" /&gt; $(document).ready(function(){  $("#in").focus(function(){   if($("#in").val()=='关键字'){   $("#in").val(""
jquery 绑定事件 - blur() 失去焦点 - focus() 获取焦点
DevOps海洋的渔夫@专栏
04-27 7154
事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件...
JQuery-事件篇
wust_cyl的博客
05-13 437
内容来源：慕课网jQuery鼠标事件之click与dbclick事件用交互操作中，最简单直接的操作就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作。这两个方法的用法是类似的，下面以click()事件为例使用上非常简单：方法一：$ele.click()绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较...
前端学习---jQuery
weixin_44264744的博客
02-15 927
一， 1.1，jQuery简介 定义：jQuery是一个轻量级的JS库，拥有大量插件plugins，兼容所有浏览器 功能：HTML 元素选取/元素操作/事件处理，CSS操作，JS特效动画，链式调用，读写合一，AJAX，Utilities 引入：<script type="text/javascript" src="jquery-1.10.2.m...
前端入门【jQuery-I】
Li_优快云_Li的博客
11-27 591
学习目标 -[ ] 了解jQuery 【了解】 -[ ] 掌握jQuery的常用选择器 【掌握】 -[ ] 掌握jQuery的常用事件 【掌握】 今日案例 【案例一】定时广告 【案例二】表格隔行换色 【案例三】全选全不选 一、jQuery简介 1、jQuery概述 ​ jquery是一个优秀的javascript的轻量级框架，兼容css3和各大浏览器，提供了dom、events、animate、ajax等简易的操作。并且jquery的插件非常丰富，大多数功能都有相应的插件解决方案。jquery的宗旨是wri
JQuery中的常用事件、对象属性与使用方法分析
10-15
7. **.focus()/.blur()**: 用于处理元素的聚焦（如输入框获得焦点）和失去焦点（如输入框失去焦点）事件。这些事件不会冒泡。 8. **.change()/.select()/.submit()**: 分别用于表单元素值变化、文本框内容被选中和...
jQuery(简介、特点、使用方法、【重点】jQuery的选择器：是jQuery的灵魂、jQuery的属性：操作标签的属性)
weixin_44892365的博客
11-03 555
jQuery(简介、特点、使用方法、【重点】jQuery的选择器：是jQuery的灵魂)
jQuery-hover(over,out)用法
abasen的专栏
08-29 3199
hover(over,out)用法:当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测.程序demo：css: .blue{font-size:30px; color:#0099FF; } ============================================
jquery.ajax
abasen的专栏
09-11 3074
这所有的最终都是通过jQuery.ajax()来完成的。   ajax : function(s) {       //两次继承s,以便在测试中能检测       s = jQuery.extend(true, s, jQuery.extend(true, {},    jQuery.ajaxSettings,    s));         ①       var jso
jQuery-parent(exp)用法
abasen的专栏
08-29 1895
parent(exp)用法:取得一个包含着所有匹配元素的唯一父元素的元素集合。   $(document).ready(function() { $("#btn1").click(function(){ alert($(this).parent().next().html()); }); });                   some text ....其中：thi
jQuery-单选框取值
abasen的专栏
08-29 1038
程序如下：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 /*方法一： $(function(){     $("#form1").submit(function(){          if($("#form1 input:checked"))
掌握jQuery核心事件：点击、双击与焦点切换
这些事件包括click（单击事件）、dblclick（双击事件）、blur（失焦事件）、focus（获得焦点事件）、keydown（键盘按键按下事件）以及mouseover（鼠标悬停事件）等。 ### 1. click事件 click事件是jQuery中最常用的...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值