我的Web学习之路1——input,textarea获得/失去焦点时隐藏/显示文字

最新推荐文章于 2024-10-13 21:40:04 发布

原创最新推荐文章于 2024-10-13 21:40:04 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsp #jquery #html #input #textarea

web 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何利用jQuery实现输入框和文本区域的默认提示功能，当用户点击输入框时清除默认提示，若输入框为空则在失去焦点时恢复默认提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要引入jquery包。

例如：jsp或者html中：

<div>

                                   <span><label>联系电话</label></span>
                                   <span><input name="userPhone" type="text" class="textBox" value="您的手机号码"></span>
                                </div>
                                <div>
                                   <span><label>地址</label></span>
                                   <span><textarea name="userAdd" class="textBox">您的详细地址</textarea></span>

</div>

注意textarea没有value属性，但是可以像上面那样写它的value。

相应js中：

                        $(function(){
       $(".textBox").bind({
         focus:function(){
           if(this.value == this.defaultValue){
              this.value = "";
          }
      },
      blur:function(){
          if(this.value == ""){
                  this.value = this.defaultValue;
          }
      }
});
                   });

其中，1.bind是绑定事件，起到简化代码的作用。

2.defaultValue得到的值就是在jsp或者html中的代码的 value值，本例中即为"您的手机号码"或者您的详细地址。

3.每个需要实现该功能的input或者textarea的class属性值都是"textBox"，这样在js中只需要用类选择器选择textBox就可以批量实现该功能。