返回首页
当前位置: 主页 > 网络编程 > Jsp实例教程 >

js与jquery实现搜索框提示文字显示与隐藏实现代码

时间:2018-11-11 23:43来源:知行网www.zhixing123.cn 编辑:麦田守望者

在做网站搜索时,我们往往会想到一种很人性化的一点,就是显示提示文字,一般这种效果很多见的,通俗的讲就是鼠标不放上的时候,显示一个“请输入文字”,鼠标放上去的时候,这个文字消失,用js的理解的话,就是鼠标获得焦点的时候更换input的value值,好了,这种效果的代码写法有很多种,大家先看代码

方法一:一行js代码搞定
<input type="text" name="s" value="提示文字" onfocus="if (value =='提示文字'){value =''}" onblur="if (value ==''){value='提示文字'}" />

方法二:一段简单的jquery搞定 先上html的form的代码
<form action="" method="post">
<input type="text" name="keyword" id="keyword" value="请输入关键词!"/>
<input type="submit" name="submit" value="提交"/>
</form>

再是jquery的代码:
$(document).ready(function() {
//搜索框
$('#keyword').focus(function() {
if($(this).val() == '请输入关键词!') {
$(this).val("");
}
});
$('#keyword').blur(function(){
if($(this).val() == "") {
$(this).val('请输入关键词!');
}
});
});

------分隔线----------------------------
标签(Tag):Javascript
------分隔线----------------------------
推荐内容
猜你感兴趣