首页 / JQUERY / javascript和jquery实现设置和移除文本框默认值效果代码_javascript技巧

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript和jquery实现设置和移除文本框默认值效果代码_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1140字，纯文字阅读大概需要2分钟。

内容图文

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

javascript和jquery实现设置和移除文本框默认值效果代码_javascript技巧 - 文章图片

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和jquery实现设置和移除文本框默认值效果代码_javascript技巧全部内容，希望文章能够帮你解决javascript和jquery实现设置和移除文本框默认值效果代码_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/323432.html

来源：【匿名】