javascript和jquery实现设置和移除文本框默认值效果代码

这里想实现的效果是：设置和移除文本框默认值，如下图鼠标放到文本框中的时候，灰字消失。

1.可以用简单的方式，就是给input文本框加上onfocus属性，如下代码：


代码如下:

<input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"
   onfocus='if(this.value=="请输入关键字进行搜索"){this.value="";}; '
   onblur='if(this.value==""){this.value="请输入关键字进行搜索";};'>

其实onfocus属性挺好用的，还可以在通过onfocus属性改变css样式，如下代码：

代码如下:

<input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"
 onfocus='if(this.value=="请输入关键字进行搜索"){this.value="";}; this.className="input01"'
 onblur='if(this.value==""){this.value="请输入关键字进行搜索";}; this.className="input02"'>

2.也可以使用jquery实现：


代码如下:

$(document).ready(function() {
        var vdefault = $('#keyword').val();

$('#keyword').focus(function() {
            //获得焦点时，如果值为默认值，则设置为空
            if ($(this).val() == vdefault) {
                $(this).val("");
            }
        });
 $('#keyword').blur(function() {
            //失去焦点时，如果值为空，则设置为默认值
            if ($(this).val()== "") {
                $(this).val(vdefault); ;
            }
        });
});

当然实现的方式还有很多种，这里只是我使用过的...

赞 (0)

相关推荐

  • javascript处理a标签超链接默认事件的方法

    本文实例讲述了javascript处理a标签超链接默认事件的方法.分享给大家供大家参考.具体分析如下: 有时需要在a标签上添加click事件,并且跳转前处理一些事务,故需要做一些处理:通常前端会给出一个<a href="#">link</a>来代表这个行为,有些还会这样写<a href="###">link</a>或者<a href="javascript:void(0);">link&

  • 默认让页面的第一个控件选中的javascript代码

    当页面上面显示了一个表单后,通常焦点 并不是放在第一个控件上面,只需要一点通常的脚本就可以实现这个效果 . document.forms[0].elements[0].focus(); 如果页面的第一个控件是隐藏字段,或是不支持focus() 上面这段javascript 可能就会出现错误 ! 复制代码 代码如下: var formutil = new Object; formutil.focusOnfirst = function() { if(document.forms.length>0)

  • 用Javascript判断图片是否存在，不存在则显示默认图片的代码

    用Javascript判断图片是否存在，不存在则显示默认图片的代码

    利用image对象的onerror事件来判断,出错则更换image对象的src为默认图片的URL. 第一种情况:图片存在,正常显示 第二种情况:图片不存在,显示默认图片 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 下面是通过js的判断用javascript判断指定图片文件是否存在: 如判断<img src="http://www.jb51.net/logos.gif">这个图片地址是否存在. 如果不存在,隔几秒重新探测此图片,如果地址有效则,提示地址有效 复

  • javascript开发随笔一 preventDefault的必要

    不加的话貌似只在ie6出现过问题.出现过:改变图片地址,结果图片不见了,加载样式,但样式文件没了.就像是中断了资源的下载一样,正确时解释是 IE6下使用A元素来做按钮的时候一定要记得在onclick事件里面调用preventDefault(),IE6会强制关闭当前活动的HTTP连接,导致正在请求的其他资源或脚本加载不正常. 但资源如果已经被缓存了,就没有这个问题了 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> </head>

  • javascript为按钮注册回车事件（设置默认按钮）的方法

    本文实例讲述了javascript为按钮注册回车事件(设置默认按钮)的方法.分享给大家供大家参考.具体如下: 首先不得不说,在JS方面,自己真的是个不折不扣的菜鸟.对于JS以及一些JS框架如JQuery等JS框架,自己也只是处在简单应用的阶段,当然自己也在不断的学习当中,希望将来能跟大家分享更多JS方面的心得.今天先来点开胃的,说一下如何设置一个默认按钮,就是不管焦点在不在按钮上,只要按下回车,就等于触发了按钮的单击事件. 代码非常简单,要完成这个功能,只需几行代码: //为keyListene

  • 关于javascript冒泡与默认事件的使用详解

    对于javascript的冒泡,我一直误解它了, 冒泡,即是从底层往外blow blow blow ... 惭愧的是,我一直以为阻止冒泡是阻止父元素往子元素传递事件-- 贴上一串代码以便往后回顾! 复制代码 代码如下: <script type="text/javascript"> window.onload=function(){ var a=document.getElementById("a"); var b=document.getElement

  • Javascript 阻止浏览器默认操作的实现代码

    在很多时候,我们需要改变这些默认操作,比如:点击一个链接时,我们执行一些 ajax 操作,但是我们并不希望执行跳转动作,于是,就有了本文:阻止浏览器默认操作. 其实这并不是一个非常难的课题,单独拿出来的原因还是浏览器兼容问题: 复制代码 代码如下: <script type="text/javascript"> // 说明:Javascript 中阻止浏览器默认操作 // 作者:John Resig function stopDefault( e ) { // Preven

  • javascript和jquery实现设置和移除文本框默认值效果代码

    javascript和jquery实现设置和移除文本框默认值效果代码

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: 复制代码 代码如下: <input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"    onfocus='if(t

  • jQuery实现设置、移除文本框默认值功能

    jQuery实现的文本框默认值感应鼠标动作: 本章节介绍一下如何利用jQuery实现文本框默认值感应鼠标动作的功能. 比如当文本框获取鼠标焦点的时候,默认值会被清空,当文本框没有输入内容,鼠标焦点离开的时候,又会恢复到默认值. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>我们</title> <sc

  • jQuery设置和移除文本框默认值的方法

    本文实例讲述了jQuery设置和移除文本框默认值的方法.分享给大家供大家参考.具体分析如下: 开始时,文本框设定一个默认值.当光标移动到文本框时,如果文本框当前值是默认值,那么清空:离开文本框时,文本框值如果为空,那么将文本框值设置为默认值. 代码如下: $(document).ready(function() { //each遍历文本框 $(".input").each(function() { //保存当前文本框的值 var vdefault = this.value; $(thi

  • jQuery实现TAB风格的全国省份城市滑动切换效果代码

    jQuery实现TAB风格的全国省份城市滑动切换效果代码

    本文实例讲述了jQuery实现TAB风格的全国省份城市滑动切换效果代码.分享给大家供大家参考.具体如下: 这里演示jQuery实现的全国省市菜单,加入了选项卡风格,把全国城市按字母范围归类,鼠标移到某一分类的时候,滑动门展开显示所属的全国省分和城市.特别适合于分类信息网站使用.当然,在需要选择省市的时候,也是可以用的.仔细看了下,菜单里面的城市还比较全,你不用再手动添加城市了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tab

  • jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例

    jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例

    本文实例讲述了jQuery简单实现的HTML页面文本框模糊匹配查询功能.分享给大家供大家参考,具体如下: 项目中需要用到此功能,使用过EasyUI中的Combobox,网上也搜过相应的解决办法,对于我的项目来说都不太合适,因为我还是喜欢比较纯粹的东西,就自己动手写了一个,比较简单,但还算能用,我的项目中也已经使用上了,做了个小demo作为记录,有需要的自己复制代码改一改就好了. 使用在线HTML/css/JavaScript运行工具:http://tools.jb51.net/code/Html

  • JS简单设置下拉选择框默认值的方法

    本文实例讲述了JS简单设置下拉选择框默认值的方法.分享给大家供大家参考,具体如下: //根据下拉对象默认选中后台对应的记录 function setSelectOption(objSelect, targetValue){ if(objSelect){ var options = objSelect.options; if(options){ var len = options.length; for(var i=0;i<len;i++){ if(options[i].value == targ

  • JavaScript实现将文本框的值插入指定位置的方法

    JavaScript实现将文本框的值插入指定位置的方法

    本文实例讲述了JavaScript实现将文本框的值插入指定位置的方法.分享给大家供大家参考.具体如下: 这里实现JavaScript将文本框的值插入当前面指定位置,这在一些表单提交场合或许我们都用到过,本代码段是将文本框的值写入到当前页的body区域内,如果你设置有其它的文本框,则可以值赋给这些文本框,可以让使用表单的用户免去输入的麻烦. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

  • JS获取及设置TextArea或input文本框选择文本位置的方法

    本文实例讲述了JS获取及设置TextArea或input文本框选择文本位置的方法.分享给大家供大家参考.具体实现方法如下: function getPos(el) { var range, textRange, duplicate el.focus() if ( el.selectionStart ) return el.selectionStart else if ( document.selection ) { // IE range = document.selection.createR

  • jQuery实现的网页右下角tab样式在线客服效果代码

    jQuery实现的网页右下角tab样式在线客服效果代码

    本文实例讲述了jQuery实现的网页右下角tab样式在线客服效果代码.分享给大家供大家参考,具体如下: 这是一款网页右下角tab样式的在线客服代码,若在火狐或chrome浏览器下,客服是带边框阴影的,IE8下好像没边框效果,整体不如在Chrome.火狐.Opera浏览器下.这款在线客服代码的底部使用了TAB选项卡的样式,鼠标点击可切换客服的内容,还是挺新颖的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-buttom

  • jquery实现适用于门户站的导航下拉菜单效果代码

    jquery实现适用于门户站的导航下拉菜单效果代码

    本文实例讲述了jquery实现适用于门户站的导航下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款应用了jQuery+CSS共同编写实现的网页导航菜单,采用浅蓝色的布局方式,整体格调淡雅清新,简洁大方,不失为一款好菜单.本特点的特点是兼容好,在火狐/IE下都有良好表现,而且在有二级子菜单的地方,主菜单上都会有一个小三角标识,很好的提升了用户体验,相信你也会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-i

随机推荐