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

最新推荐文章于 2021-09-30 22:39:26 发布
最新推荐文章于 2021-09-30 22:39:26 发布 · 165 阅读 · 0
文章标签：

#jQuery #CSS #ViewUI

本文介绍了一种使用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 focus和blur事件的应用详解
12-10
一、需求原因在填写表单时需要实现如下效果二、具体实现 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD...<head><... charset=UTF-8″><...script language=”JavaScript”src=”../jQuery/jquery-1.7.1.
jQuery简单实现input文本框内灰色提示文本效果的方法
10-23
在Web前端开发中，为input文本框添加灰色提示文本是一种常见且实用的交互设计方式，目的是为了给用户明确的指示输入框中的内容应该是什么，同时当输入框获得焦点时提示文本消失，这样可以提高用户界面的友好性和直观...
文本框灰色文字提示，鼠标点击文字消失
weixin_30536513的博客
03-21 524
下面是提示用户名处要输入手机号码，代码虽然简短，但留着以后自己用 <input id="TelOrEmail" name="TelOrEmail" type="text" style="color:#999" value="手机号码" onfocus="this.style.color='#000'; if(this.value=='手机号码') { this.value='...
今天写一个注册或是登录时都可以用的东西，就是在input方框中点击，方框内文字消失，失去焦点，则又显示
LinhongweiLF的博客
07-28 567
代码如下：     pageEncoding="UTF-8"%> 注册界面 $(function(){ $('.input_test').bind({ focus:function(){ if(this.value==this.defaultValue){ this.value=""; } }, blur:function(){ if(this.v
jQuery 事件 - blur() 方法
niusi1288的博客
04-18 949
实例 当输入域失去焦点 (blur) 时改变其颜色： $("input").blur(function(){ $("input").css("background-color","#D6D6FF"); }); 定义和用法 当元素失去焦点时发生 blur 事件。 blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blu
jQuery实现input文本框内灰色提示文本效果
dwj200810的博客
05-07 556
[code="java"] input test function inputTipText(){ $("input[class*=grayTips]") //所有样式名中含有grayTips的input .each(function(){ var oldVal=$(this).val(); //默认的提示性文本 ...
jQuery-HTML5-CSS3实现的文本框.zip
11-19
在文本框中，jQuery可以用来监听用户交互，如`focus`（聚焦）、`blur`（失去焦点）、`keyup`（按键释放）等事件，从而实现动态验证、提示信息显示等高级功能。例如，当用户离开文本框时，可以使用`.blur()`方法检查...
html代码文本框限制输入-文本框变灰色-限制文本框输入.doc
最新发布
07-13
与readonly属性类似，disabled属性的文本框同样不允许用户输入，但与readonly属性不同的是，文本框不仅不能被修改，还无法被选中和获得焦点，且通常呈现为灰色状态。这表示该输入框已被禁用，适合于用户不需要交互，...
jQuery设置和移除文本框默认值的方法
10-24
我们定义了一个变量`defaultVal`来存储文本框的默认值，然后通过`.focus()`和`.blur()`方法为文本框绑定获得焦点和失去焦点事件处理函数。在获得焦点时，通过判断当前值是否与默认值相同来决定是否清空文本框；而在...
jQuery总结（五）、on、bind、one、hover、focus、blur、change函数的用法
m0_57446284的博客
09-30 1735
一、on（event，[selector],[data],fn） 在选择器上绑定一个或者多个事件 events：一个或多个用空格分隔的事件类型名称 fn：事件触发时执行的函数，false值可作为函数的简写，返回false selector：选择器字符串用于过滤器的触发事件的选择器元素的后代 data：当一个事件被触发时要传递给事件处理函数event.data的数据 event是自定义在处理函数的数据访问名称，用此名称.data（引用关键字）对参数data目标数据进行引用；通常data可以是M..
通过例子学习JQuery--文本框得到/失去焦点
mjx20045912的专栏
03-22 8818
  例子名称：文本框得到/失去焦点     效果1：文本框得到焦点时，背景颜色发生变化，失去焦点时背景颜色恢复。    代码：         $(document).ready(function()           {                  $(":input").focus(function(){                       $(this).
jQuery学习笔记- focus和blur事件妙用
yuhangkit
03-15 7810
一、定义和用法 focus事件 当元素获得焦点时，发生 focus 事件。 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。 focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。 blur事件 当元素失去焦点时发生 blur 事件。 blur() 函数触发 blur 事件，或
jQuery 事件中 bind 方法和blur() 方法
热门推荐
叶落无痕的博客
04-24 1万+
1.bind 方法 定义和用法 bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。 自jq版本1.7起，on()方法是被选中元素添加事件处理程序的首选方法 语法 $(selector).bind(event,data,function,map) 参数 描述 event
jQuery的blur()方法怎么用？
weixin_45587319的博客
12-18 2480
blur()是jquery中的一个内置方法，用于从所选元素中移除焦点。此方法启动blur事件，或者可以附加一个函数，以便在发生blur事件时运行。 原文地址：jQuery的blur()方法怎么用？ blur()方法触发 blur 事件，或者如果设置了 function 参数，该方法也可规定当发生 blur 事件时执行的代码。 语法： $(selector).blur(function...
jQuery blur()方法会执行2次onblur方法
jason_czm的博客
06-20 6781
今天在处理html页面时遇到一个问题，表单提交前想通过jQuery.blur()来验证表单数据的填写的规范性。 可是jQuery.blur()执行时每次都被执行2次，下面是简单的测试验证代码。 &lt;html&gt; &lt;head&gt; &lt;script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"&gt;&lt...
【jquery】input 和 blur 事件
列苗
10-29 2852
实现功能为：Dom 加载完之后，给input输入框绑定 input(输入变化) 和 blur(失去焦点) 事件，代码如下（错误）： $("#newname").on("input", fIsNull("newname")) ; $("#newname").blur(fIsNull("newname")) ; 该代码会出现页面加载后自动执行 fIsNull 函数；后查看 jquery 文档发现，
el-select 中使用focus方法文本框并没有高亮显示啊
04-01
然而，在某些情况下，当调用 `focus()` 方法时，可能会遇到文本框未能正常高亮显示的问题。 #### 问题分析 此现象通常由以下几个原因引起： 1. **组件状态管理不一致**：如果手动触发了 `focus()` 方法，而内部的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值