Question

我知道有很多问题都有这方面的答案，但我的情况有点不同。我试图模仿'placeholder'属性的确切行为，即 -

1。文字仍然是onfocus

2。光标移动到文本的开头

第3。通过鼠标单击拖动或键盘的移位箭头

无法选择文本

4。按键或粘贴时文字消失

和第5个显然是'this'文本在提交时被删除。

我认为我已经完成了'1'和'4'的第一部分但是'2'，'3'和第4部分（onpaste）仍然存在问题...... :(

到目前为止我的jquery ....

$(document).ready(function(){
if(!Modernizr.input.placeholder){
    $('[placeholder]').keypress(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).keyup(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).keyup();
    $('[placeholder]').parents('form').submit(function() {
      $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });
    $('[placeholder]').focus(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
              //move the cursor to beginning
              //move the text unselectable
    }
});
}
});

对于第二和第三，我尝试使用onselectstart，setCursorPosition，setSelectionRange等...但似乎没有任何工作按预期工作。而对于onpaste，我认为用keypress绑定它但是现在不知道怎么做b3z在w3schools没有这样的事件attrubute：http://www.w3schools.com/tags/ref_eventattributes.asp虽然在MSDN它显示：http://msdn.microsoft.com/en-us/library/ie/ms536955%28v=vs.85%29.aspx。

所以请帮忙！

Answer 1

我建议采用不同的方法，使用CSS更改标签的位置以显示在输入和JS上，仅在IE上，使标签可见。

(function ($) {

    $.fn.placeholder = function (options) {

        var options = $.extend({}, $.fn.placeholder.defaults, options);

        //show <label @for> for IE 
        if ($.browser.msie && $.browser.version < 10)
        {
            return this.each(function () {

                var $this = $(this);            

                $("label[for=" + $this.attr('id') + "]").show();

                //hide placeholder on focus
                $this.focus(function () {
                    if (!$.trim($this.val())) {
                        $("label[for=" + $this.attr('id') + "]").hide();
                    };
                });

                //show placeholder if the input is empty
                $this.blur(function () {
                    if (!$.trim($this.val())) {
                        $("label[for=" + $this.attr('id') + "]").show();
                    };
                });
            });
        }
    };

    //expose defaults
    $.fn.placeholder.defaults = {

    };
})(jQuery);

为IE模拟HTML5的“占位符”属性

1 个答案: