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

问题如标题:

鼠标点击到输入框(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-09-17 03:42:57

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

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

 本文给大家分享的是一则非常常用和实用的小技巧,当鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现,推荐给小伙伴们     问题如标题: 鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现.如图所示: 做法如下:   代码如下: <input type="text" name="name" id="name" class="ind_cont_input ind_

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

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

基于Bootstrap重置输入框内容按钮插件_javascript技巧

当好在输入框中输入一些内容之后,如果想清除这些内容,可以直接点击输入框右侧的小圆叉按钮即可.  text  password  email  url  search  tel  number  datetime 使用方法 使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件. <link rel="stylesheet" href="https://maxcdn.boo

详细总结Javascript中的焦点管理_javascript技巧

焦点元素 到底哪些元素可以获得焦点呢?默认情况下,只有表单元素可以获得焦点.因为只有表单元素可以交互 <input type="text" value="223"> 让非表单元素获得焦点也是有办法的,先将tabIndex属性设置为-1,再调用focus()方法 <div id="test" style="height:30px;width:100px;background:lightgreen">div

模仿password输入框的实现代码_javascript技巧

实例如下: function hiddenPass(event) { var password0 = document.getElementById("password0"); var password1 = document.getElementById("password1"); if (event.keyCode == 13) { } var keycode; if (window.event) { // IE keycode = event.keyCode

JavaScript(js)设置默认输入焦点(focus)_javascript技巧

常常会在回复和引用里使用此功能,即单击回复或引用,如让输入焦点出现在留言输入框中,如果使用锚来定位,输入焦点就不能激活了. 复制代码 代码如下: javascript:document.getElementById("id").focus(); 或javascript:document.all.id.focus(); 或javascript:document.all.name.focus(); 例子: 复制代码 代码如下: <input type="text"

js实现当前输入框高亮显示的方法_javascript技巧

本文实例讲述了js实现当前输入框高亮显示的方法.分享给大家供大家参考.具体如下: 这里演示利用JavaScript技术实现的当前输入框高亮显示代码,在很多的网页表单中,当用户鼠标点击文本框的时候,该文本框就会显示高亮状态,提醒用户输入,本例通过JAVAScript代码实现了这样一种效果. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-color-show-codes/ 具体代码如下: <!DOCTYPE html

使用TextRange获取输入框中光标的位_javascript技巧

TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了.不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢?      TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作,比如变化.删除.新增等.但其经典的用途却是,在Web页面中查找文字(这个比较简单)和获取输入框光标的位置.其中后者又有可以衍生出很多更有用的用途,比如:限制输入的MaskTextBox,其核心技术点就是获取输入框的光标

JavaScript实现的多种鼠标拖放效果_javascript技巧

本文实例讲述了JavaScript实现的多种鼠标拖放效果.分享给大家供大家参考,具体如下: 这是一款JavaScript鼠标拖放效果代码,通过本示例了解触发对象,设置范围限制,指定容器大小水平及垂直锁定,还包括获取和释放焦点等. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-move-fix-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0