js placeholder

最新推荐文章于 2025-08-10 13:53:57 发布

转载最新推荐文章于 2025-08-10 13:53:57 发布 · 629 阅读

文章标签：

#javascript

Js模块化开发案例分析专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的兼容旧版浏览器的placeholder文本框提示效果的方法。该方法通过判断当前浏览器是否支持HTML5的placeholder属性来决定是否加载自定义的提示逻辑。对于不支持的浏览器，会为文本框添加占位符文本并在获取焦点时清除这些文本。

// JavaScript Document
$(function(){
    if( !('placeholder' in document.createElement('input')) ){  

    $('input[placeholder],textarea[placeholder]').each(function(){   
      var that = $(this),   
      text= that.attr('placeholder');   
      if(that.val()===""){   
        that.val(text).addClass('placeholder');   
      }   
      that.focus(function(){   
        if(that.val()===text){   
          that.val("").removeClass('placeholder');   
        }   
      })   
      .blur(function(){   
        if(that.val()===""){   
          that.val(text).addClass('placeholder');   
        }   
      })   
      .closest('form').submit(function(){   
        if(that.val() === text){   
          that.val('');   
        }   
      });   
    });   
  }     



})