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弹出新窗口并控制窗口移动到指定位置的方法
这篇文章主要介绍了JavaScript弹出新窗口并控制窗口移动到指定位置的方法,涉及javascript针对弹出窗口的操作技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了js实现表格单列按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
日期函数是我们经常用到的知识点，下面通过本文给大家介绍JavaScript中日期函数的相关操作知识，非常不错，感兴趣的朋友一起学习吧2016-08-08
我花了很多时间，学习这个部分，还做了很多笔记。但是都属于强行记忆，无法从根本上理解。2011-08-08
这篇文章主要介绍了基于JavaScript实现类似于百度学术高级检索功能 的相关资料,需要的朋友可以参考下2016-03-03
昨天看到谷歌的主页上出现了几个动画，发现不是flash做的，而是用js+图片实现的！今天把拷贝到的图片，用js实现了动画效果！2013-07-07
这篇文章主要介绍了JavaScript中的公有、私有、特权和静态成员用法,以实例形式分析了其使用方法,简单易懂,对于初学javascript的朋友具有不错的学习与借鉴价值,需要的朋友可以参考下2014-11-11
在JavaScript中实现前端图片上传即时预览功能是一项常见的需求,特别是在网页交互设计中,这篇文章主要给大家介绍了关于前端实现图片或视频预览的三种方法,需要的朋友可以参考下2024-06-06
javascript中关于&& 和 || 表达式的小技巧分享
我将会介绍和解析12个简单但是强大的JavaScript技巧. 这些技巧所有的JavaScript程序员都可以马上使用, 你不需要成为JavaScript高手才能理解这些.下面我们开始本系列的第一篇文章，介绍下强大的&& 和 || 表达式2015-04-04
uniapp是2019年火爆的一个Dcloud开发跨平台前端工具,下面这篇文章主要给大家介绍了关于uniapp添加车牌组件的实现与使用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
最新评论