源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-11-30 23:59 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript和jquery实现设置和移除文本框默认值效果代码
这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失。 [img]http://files.jb51.net/file_images/article/201501/2015113102010416.jpg?2015013102021[/img] [b]1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: [/b]
[u]复制代码[/u] 代码如下:
<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样式,如下代码:
[u]复制代码[/u] 代码如下:
<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"'>
[b]2.也可以使用jquery实现: [/b]
[u]复制代码[/u] 代码如下:
$(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); ;             }         }); });
当然实现的方式还有很多种,这里只是我使用过的...
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部