码迷,mamicode.com
首页 > Web开发 > 详细

js与jQuery

时间:2016-11-23 07:57:12      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:提示   www   cti   arch   submit   comment   value   网站   document   

在做网站搜索时,我们往往会想到一种很人性化的一点,就是显示提示文字,一般这种效果很多见的,通俗的讲就是鼠标不放上的时候,显示一个“请输入文字”,鼠标放上去的时候,这个文字消失,用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(‘请输入关键词!‘);      
        }      
    });      
});  

转载自:http://www.9958.pw/post/js_search_input_title

js与jQuery

标签:提示   www   cti   arch   submit   comment   value   网站   document   

原文地址:http://www.cnblogs.com/guoyong-feng/p/6092230.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!