javascript和jquery实现设置和移除文本框默认值效果代码
更新时间：2015年01月13日 10:24:36 投稿：junjie
这篇文章主要介绍了javascript和jquery实现设置和移除文本框默认值效果代码,本文实现的是类似html5 placeholder（空白提示）一种效果,需要的朋友可以参考下
这里想实现的效果是：设置和移除文本框默认值，如下图鼠标放到文本框中的时候，灰字消失。
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); ;
}
});
});
当然实现的方式还有很多种，这里只是我使用过的...
相关文章
因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念。特别是很多不是计算机专业的朋友在进入到前端之后，会对内存空间的认知比较模糊，甚至有些人干脆就是一无所知。为了解决大家的疑惑，本文将详细介绍JS内存空间2021-06-06
下面小编就为大家分享一篇解决npm安装Electron缓慢网络超时导致失败的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家详细介绍了微信小程序下拉框组件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了js用类封装pop弹窗组件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
火狐浏览器(firefox)下获得Event对象以及keyCode
firefox Event对象2008-11-11
ff和ie6下都是同样的运行结果,看来不是bug,那究竟是为什么呢？ 注意到：对象方法访问其对象的属性时|必须|加以this.(和java不一样).2008-11-11
js中base64、url和blob之间相互转换的3种方式(详细代码)
这篇文章主要给大家介绍了关于js中base64、url和blob之间相互转换的3种方式,Blob和File是用来表示二进制数据的,而Base64则是一种编码方式,用来把二进制数据编码成可读的字符串,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了JS正则表达式获取分组内容的方法，有需要的朋友可以参考一下2013-11-11
这里给大家分享的是4屏带标题和文字描述的js图片轮播代码，完美兼容IE6。图片滚动切换，鼠标放到数字选项卡即可切换图片。点击图片跳转到指定页面，有需要的小伙伴可以参考下。2015-05-05
这篇文章主要介绍了Js为表单动态添加节点内容的方法,实例分析了js针对表单节点进行添加操作的常用技巧,需要的朋友可以参考下2015-02-02
最新评论