input输入框鼠标焦点提示信息

 本文给大家分享的是一则非常常用和实用的小技巧,当鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现,推荐给小伙伴们

 
 

问题如标题:

鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现。如图所示:

做法如下:

 

代码如下:

<input type="text" name="name" id="name" class="ind_cont_input ind_cont_inputioce1" onfocus="if (value =='请输入2-5个中文名字'){value =''}" onblur="if (value ==''){value='请输入2-5个中文名字'}" value="请输入2-5个中文名字">
<input type="text" name="tel" id="tel" class="ind_cont_input ind_cont_inputioce2 ind_cont_inputboder1" value="请输入您的电话" onfocus="if (value =='请输入您的电话'){value =''}" onblur="if (value ==''){value='请输入您的电话'}">

 

注意点为input的onblur和onfocus属性。另外也有简单的if判断。很方便很实用。

以上就是本文所述的全部内容了,希望大家能够喜欢。

时间: 2024-10-11 03:46:37

input输入框鼠标焦点提示信息的相关文章

input输入框鼠标焦点提示信息_javascript技巧

问题如标题: 鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现.如图所示: 做法如下: 复制代码 代码如下: <input type="text" name="name" id="name" class="ind_cont_input ind_cont_inputioce1" onfocus="if (value =='请输入2-5个中文名字'){value =''}&quo

php实现input输入框失去焦点自动保存输入框的数据

最近做一个输入框失去焦点时自动保存数据的功能,当然就是jQuery选择器选择input,blur时,ajax提交数据给php文件,php文件保存一下数据咯.主要是要注意一下中文的问题,所以中间需要转一下编码. 下面的实例是一个列表页,有一点类似excel了. html代码:  代码如下 复制代码 <table width="100%" align="left" border="0″ cellspacing="0″ bgcolor="

控制input输入框中提示信息的显示和隐藏的方法

 这篇文章主要介绍了怎样控制input输入框中提示信息的显示和隐藏 ,需要的朋友可以参考下 在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐藏.今天在这里,想跟大家分享一下这个小技巧,希望各位大神不要拍砖哦~~~    一.要求    input输入框,在光标显示时,隐藏提示信息:光标离开输入框时,显示提示信息.    二.方法    1.给该i

控制input输入框中提示信息的显示和隐藏的方法_javascript技巧

在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐藏.今天在这里,想跟大家分享一下这个小技巧,希望各位大神不要拍砖哦~~~ 一.要求 input输入框,在光标显示时,隐藏提示信息:光标离开输入框时,显示提示信息. 二.方法 1.给该input取id名,Onfocus="方法名1(this)",onblur="方法名2(this)

input 输入框获得/失去焦点时隐藏/显示文字(jquery版)_jquery

input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态:  输入框获取焦点状态:  大家可以看效果图的搜索输入框,默认显示着"用户名/Email"的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示"用户名/Email"的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 复制代码 代码如下: &l

jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码_jquery

复制代码 代码如下: <input value="请输入用户名" type="text"> <input value="请输入密码" type="text"> <input value="提交" type="submit"> <script> $(function(){ //输入框中文字颜色控制 $("input:not(:las

input 输入框获得/失去焦点时隐藏与显示文字

js中实现方法  代码如下 复制代码 <input type="text" value="不推荐这么做" onfocus="if(this.value == '不推荐这么做') this.value = ''" onblur="if(this.value == '') this.value = '不推荐这么做'" /> jquery方法  代码如下 复制代码 <!DOCTYPE HTML> <ht

基于jQuery的input输入框下拉提示层(自动邮箱后缀名)_jquery

效果图 代码部分 复制代码 代码如下: // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(document).click(function(event){ if($(

鼠标焦点离开文本框时验证的js代码

本文为大家介绍下利用js来验证文本框的值,当鼠标焦点离开文本框时进行验证,示例代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助   利用js来验证文本框的值 复制代码 代码如下: <script> function onblurs(){ if(frm.name.value==""){ alert("请输入您的名字!"); }else if(frm.funny.value==""){ alert("爱好不得为空哦!&qu