选择页面

HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现:

<script type="text/javascript">
  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('');
        }
      });
    });
  }
</script>

这一段还挺简洁的,可惜不太支持密码框的文字显示。


(function($) {
  /**
   * 不开花的树
   * http://blog.csdn.net/cwqcwk1/
   * 2012/11/28 15:12
   */

  var placeholderfriend = {
    focus: function(s) {
      s = $(s).hide().prev().show().focus();
      var idValue = s.attr("id");
      if (idValue) {
        s.attr("id", idValue.replace("placeholderfriend", ""));
      }
      var clsValue = s.attr("class");
	  if (clsValue) {
        s.attr("class", clsValue.replace("placeholderfriend", ""));
      }
    }
  }

  //判断是否支持placeholder
  function isPlaceholer() {
    var input = document.createElement('input');
    return "placeholder" in input;
  }
  //不支持的代码
  if (!isPlaceholer()) {
    $(function() {

      var form = $(this);
      var elements = form.find("input[type='text'][placeholder]");
      elements.each(function() {
        var s = $(this);
        var pValue = s.attr("placeholder");
		var sValue = s.val();
        if (pValue) {
          if (sValue == '') {
            s.val(pValue);
          }
        }
      });

      elements.focus(function() {
        var s = $(this);
        var pValue = s.attr("placeholder");
		var sValue = s.val();
        if (sValue && pValue) {
          if (sValue == pValue) {
            s.val('');
          }
        }
      });

      elements.blur(function() {
        var s = $(this);
        var pValue = s.attr("placeholder");
		var sValue = s.val();
        if (!sValue) {
          s.val(pValue);
        }
      });

      var elementsPass = form.find("input[type='password'][placeholder]");
      elementsPass.each(function(i) {
        var s = $(this);
        var pValue = s.attr("placeholder");
		var sValue = s.val();
        if (pValue) {
          if (sValue == '') {
            var html = this.outerHTML || "";
            html = html.replace(/\s*type=(['"])?password\1/gi, " type=text placeholderfriend").replace(/\s*(?:value|on[a-z]+|name)(=(['"])?\S*\1)?/gi, " ").replace(/\s*placeholderfriend/, " placeholderfriend value='" + pValue + "' " + "onfocus='placeholderfriendfocus(this);' ");
            var idValue = s.attr("id");
            if (idValue) {
              s.attr("id", idValue + "placeholderfriend");
            }
            var clsValue = s.attr("class");
			if (clsValue) {
              s.attr("class", clsValue + "placeholderfriend");
            }
            s.hide();
            s.after(html);
          }
        }
      });

      elementsPass.blur(function() {
        var s = $(this);
        var sValue = s.val();
        if (sValue == '') {
          var idValue = s.attr("id");
          if (idValue) {
            s.attr("id", idValue + "placeholderfriend");
          }
          var clsValue = s.attr("class");
		  if (clsValue) {
            s.attr("class", clsValue + "placeholderfriend");
          }
          s.hide().next().show();
        }
      });

    });
  }
  window.placeholderfriendfocus = placeholderfriend.focus;
})(jQuery);

这个完美的解决了密码框文字变成密码的囧状

(function ($){
    $.fn.scPlaceholder=function(color){
      var color=color || "#999";
      //Placeholder Ability
      if( 'placeholder' in document.createElement('input') ){
        return false;
     }   
      return this.each(function(i,obj){
        var scPid=(this.name || this.id)+"_scPid_"+i;
        var me=$(this);
        var className=me.attr("class");
        var placeholderText=me.attr("placeholder");
        me.before("<input type='text' id="+scPid+" class='"+className+"' value='"+placeholderText+"'>");
        $("#"+scPid).hide().css("color",color);
        if(this.value==""){
          me.hide();
          $("#"+scPid).show();
        }   
        $("#"+scPid).focus(function(){
            $(this).hide();
            me.show();
            me.focus();
        }); 
        me.blur(function(){
          if(this.value==""){
            me.hide();
            $("#"+scPid).show();
          }   
        }); 
      }); 
    }   
  })(jQuery);

<script>
$(document).ready(function(){ 
    changeStepView('.con-mid');
 });
function changeStepView(aa){
	var inputs=$(aa).find("input[name]");
	  inputs.filter("[placeholder]").miPlaceholder();
      inputs.bind("focus",function(){
      startCheckValueChange(this);
    });
    inputs.bind("blur",function(){
      stopCheckValueChange(this);
    });
   }
function startCheckValueChange(input){
    var _check=function(){
      if(input.value!==input._oldValue){
        if(input.value==="" && (input.name==='icode' || input.name==='inputcode')){
          input._oldValue=input.value;return false;
        }
        input._oldValue=input.value;
        $(input).trigger("valueChange");
      }
      input.__valuechangetc=setTimeout(_check,300);
    }
    _check();
  }
function stopCheckValueChange(input){
    clearTimeout(input.__valuechangetc);
 }
</script>

这个是通过小米改造的来着,相对简洁一些,也能很好的解决密码框问题~~