1

これに対する答えがたくさんある質問がたくさんあることは知っていますが、私の場合は少し異なります。「プレースホルダー」属性の正確な動作をエミュレートしようとしていますが、これは-

1. テキストはオンフォーカスのまま

2. カーソルがテキストの先頭に移動します

3. マウスのクリックとドラッグ、またはキーボードの Shift キーを押しながら矢印キーを押しても、テキストを選択できません。

4.キーを押すか貼り付けるとテキストが消える

そして5番目は明らかに「これ」のテキストが送信時に削除されます。

「1」と「4」の最初の部分は終わったと思いますが、「2」、「3」、および4番目の2番目の部分（貼り付け）はまだ問題が残っています... :(

これまでの私の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
    }
});
}
});

2 番目と 3 番目については、onselectstart、setCursorPosition、setSelectionRange などを試してみましたが、意図したとおりに機能していないようです。そして、オンペーストについては、キープレスでバインドすることを考えましたが、w3schools で bcoz を何をすべきかわかりません。そのようなイベント属性はありません: http://www.w3schools.com/tags/ref_eventattributes.asp MSDN では表示されますが: http ://msdn.microsoft.com/en-us/library/ie/ms536955%28v=vs.85%29.aspx .

だから助けてください！

4

1 に答える 1

0

CSS を使用して入力の上に表示されるラベルの位置を変更し、IE でのみ JS からラベルを表示する別のアプローチをお勧めします。

(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);
于 2012-10-28T11:12:00.993 に答える