美文网首页
模拟input的placeholder效果

模拟input的placeholder效果

作者: abigdonkey | 来源:发表于2017-04-03 14:36 被阅读0次

    1.onfocus

    当input获得焦点的时候,触发focus事件

    如果input的值存在并且等于默认值defaultValue ,则清空输入框的值

    2.onblur

    当input失去焦点的时候,触发blur事件

    如果input内没有值,则赋予默认值defaultValue

    3.自定义trim()方法,去除首尾空格

    String.prototype.trim = function(){

          var reg = /(^\s*|\s*$)/g;

          return this.replace(reg,"");

    };

    4.具体实现

    inputObj.onfocus = function(){

          var defaultVal = this.defaultValue.trim(),

              val = this.value.trim();

          if(val && val === defaultVal){

              this.value = "";

       }

    }

    inputObj.onblur = function(){

        var defaulVal = this.defaultValue.trim(),

            val = this.value.trim();

          if(!val){

                this.value = defaulVal;

          }

    }

    相关文章

      网友评论

          本文标题:模拟input的placeholder效果

          本文链接:https://www.haomeiwen.com/subject/qmxoottx.html