template教學 - 反引號javascript




Internet Explorer的輸入佔位符 (12)

Placeholdr是我寫的一個超輕量級的嵌入式佔位符jQuery聚合填充。 它小於1 KB的縮小。

我確信這個庫可以解決你的兩個問題:

  1. Placeholdr擴展了jQuery $ .fn.val()函數,以防止由於Placeholdr在輸入字段中出現文本時出現意外的返回值。 所以如果你堅持使用jQuery API來訪問你的字段的值,你不需要改變一件事情。

  2. Placeholdr偵聽表單提交,並從字段中刪除佔位符文本,以便服務器僅查看空值。

同樣,我的Placeholdr目標是為佔位符問題提供一個簡單的插入式解決方案。 讓我知道Github上是否有其他任何你對獲得Placeholdr支持感興趣的東西。

HTML5引入了input元素的placeholder屬性,它允許顯示灰色的默認文本。

可悲的是IE瀏覽器,包括IE 9不支持它。

已經有一些佔位符模擬器腳本了。 他們通常通過將默認文本放入輸入字段中,給它一個灰色,並在您關注輸入字段後立即將其刪除。

這種方法的缺點是佔位符文本位於輸入字段中。 從而:

  1. 腳本無法輕鬆檢查輸入字段是否為空
  2. 服務器端處理必須檢查默認值,以便不將佔位符插入到數據庫中。

我想有一個解決方案,佔位符文本不在輸入本身。


使用jQuery實現,當需要提交時,您可以輕鬆地刪除默認值。 下面是一個例子:

$('#submit').click(function(){
   var text = this.attr('placeholder');
   var inputvalue = this.val();  // you need to collect this anyways
   if (text === inputvalue) inputvalue = "";

   // $.ajax(...  // do your ajax thing here

});

我知道你正在尋找一個覆蓋,但你可能更喜歡這條路線的緩解(現在知道我上面寫的)。 如果是這樣,那麼我寫這個為我自己的項目,它的作品真的很好(需要jQuery),並只需要幾分鐘來實現您的整個網站。 它首先提供灰色文本,焦點時為淺灰色,而打字時為黑色。 只要輸入字段為空,它也提供佔位符文本。

首先設置您的表單並在輸入標籤中包含您的佔位符屬性。

<input placeholder="enter your email here">

只需複制此代碼並將其另存為placeholder.js即可。

(function( $ ){

   $.fn.placeHolder = function() {  
      var input = this;
      var text = input.attr('placeholder');  // make sure you have your placeholder attributes completed for each input field
      if (text) input.val(text).css({ color:'grey' });
      input.focus(function(){  
         if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){     
            input.val("").css({ color:'black' });  
         });
      });
      input.blur(function(){ 
         if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' }); 
      }); 
      input.keyup(function(){ 
        if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
            input.val("").css({ color:'black' });
        });               
      });
      input.mouseup(function(){
        if (input.val() === text) input.selectRange(0,0); 
      });   
   };

   $.fn.selectRange = function(start, end) {
      return this.each(function() {
        if (this.setSelectionRange) { this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true); 
            range.moveEnd('character', end); 
            range.moveStart('character', start); 
            range.select(); 
        }
      });
   };

})( jQuery );

僅用於一個輸入

$('#myinput').placeHolder();  // just one

這是我建議您在瀏覽器不支持HTML5佔位符屬性時在網站上的所有輸入字段上實施它的方式:

var placeholder = 'placeholder' in document.createElement('input');  
if (!placeholder) {      
  $.getScript("../js/placeholder.js", function() {   
      $(":input").each(function(){   // this will work for all input fields
        $(this).placeHolder();
      });
  });
} 

在查看HTML5 Cross Browser Polyfills的“Web Forms:input placeholder”部分時,我看到的是jQuery-html5-placeholder

我試著用IE9進行demo ,它看起來像是用一個span來包裝你的<input> ,並用佔位符文本覆蓋一個標籤。

<label>Text:
  <span style="position: relative;">
    <input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
    <label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
  </span>
</label>

那裡還有其他的墊片,但我沒有看到它們。 其中一個Placeholders.js宣稱自己“沒有依賴關係(因此不需要包含jQuery,不像大多數佔位符polyfill腳本)”。

編輯:對於那些“如何”如何“什麼”更感興趣, 如何創建一個先進的HTML5佔位符polyfill ,通過創建一個jQuery插件來完成這個過程。

此外,請在IE10中關注佔位符,以便了解如何通過IE10(與Firefox和Chrome不同)佔位符文本消失。 不知道是否有解決這個問題的方法。


您可以使用 :

var placeholder = 'search  here';

$('#search').focus(function(){
    if ($.trim($(this).val()) ===  placeholder){
        this.value ='';
    }
}).blur(function(){
    if ($.trim($(this).val()) ===  ''){
        this.value = placeholder;
    }
}).val(placeholder);


我對自己的jQuery插件感到沮喪之後創建了自己的jQuery插件,因為現有的墊片會將佔位符隱藏在焦點上,從而導致較差的用戶體驗,並且與Firefox,Chrome和Safari處理它的方式不一致。 如果希望在第一次加載頁面或彈出窗口時輸入被聚焦,而在輸入文本之前仍顯示佔位符,則情況尤其如此。

https://github.com/nspady/jquery-placeholder-labels/


我想出了一個簡單的佔位符JQuery腳本,它允許自定義顏色,並在重點時使用不同的清除輸入行為。 它取代了Firefox和Chrome中的默認佔位符,並增加了對IE8的支持。

// placeholder script IE8, Chrome, Firefox
// usage: <input type="text" placeholder="some str" />
$(function () { 
    var textColor = '#777777'; //custom color

    $('[placeholder]').each(function() {
        (this).attr('tooltip', $(this).attr('placeholder')); //buffer

        if ($(this).val() === '' || $(this).val() === $(this).attr('placeholder')) {
            $(this).css('color', textColor).css('font-style','italic');
            $(this).val($(this).attr('placeholder')); //IE8 compatibility
        }

        $(this).attr('placeholder',''); //disable default behavior

        $(this).on('focus', function() {
            if ($(this).val() === $(this).attr('tooltip')) {
                $(this).val('');
            }
        });

        $(this).on('keydown', function() {
            $(this).css('font-style','normal').css('color','#000');
        });

        $(this).on('blur', function() {
            if ($(this).val()  === '') {
                $(this).val($(this).attr('tooltip')).css('color', textColor).css('font-style','italic');
            }
        });
    });
});


插入插件並檢查ie是完美的workingjquery.placeholder.js

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.placeholder.js"></script>
    <script>
        // To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
        // $.fn.hide = function() { return this; }
        // Then uncomment the last rule in the <style> element (in the <head>).
        $(function() {
            // Invoke the plugin
            $('input, textarea').placeholder({customClass:'my-placeholder'});
            // That’s it, really.
            // Now display a message if the browser supports placeholder natively
            var html;
            if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
            } else if ($.fn.placeholder.input) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
            }
            if (html) {
                $('<p class="note">' + html + '</p>').insertAfter('form');
            }
        });
    </script>

注意:這個polyfill的作者聲稱它“幾乎適用於任何你可以想像的瀏覽器”,但根據對IE11來說這不是真的評論, IE11具有原生支持,就像大多數現代瀏覽器一樣

Placeholders.js是我見過的最好的佔位符polyfill,是輕量級的,不依賴於JQuery,覆蓋其他舊瀏覽器(不僅僅是IE),並且具有隱藏輸入和運行一次佔位符的選項。


這樣簡單:

$(function() {
    ...

    var element = $("#selecter")
    if(element.val() === element.attr("placeholder"){

        element.text("").select().blur();
    }

    ...
});

  • 僅適用於IE9 +

以下解決方案使用placeholder屬性綁定到輸入文本元素。 它模擬一個僅用於IE的佔位符行為,如果未更改,則在提交時清除輸入的值字段。

添加這個腳本和IE似乎支持HTML5佔位符。

  $(function() {
  //Run this script only for IE
  if (navigator.appName === "Microsoft Internet Explorer") {
    $("input[type=text]").each(function() {
      var p;
     // Run this script only for input field with placeholder attribute
      if (p = $(this).attr('placeholder')) {
      // Input field's value attribute gets the placeholder value.
        $(this).val(p);
        $(this).css('color', 'gray');
        // On selecting the field, if value is the same as placeholder, it should become blank
        $(this).focus(function() {
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
         // On exiting field, if value is blank, it should be assigned the value of placeholder
        $(this).blur(function() {
          if ($(this).val() === '') {
            return $(this).val(p);
          }
        });
      }
    });
    $("input[type=password]").each(function() {
      var e_id, p;
      if (p = $(this).attr('placeholder')) {
        e_id = $(this).attr('id');
        // change input type so that the text is displayed
        document.getElementById(e_id).type = 'text';
        $(this).val(p);
        $(this).focus(function() {
          // change input type so that password is not displayed
          document.getElementById(e_id).type = 'password';
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
        $(this).blur(function() {
          if ($(this).val() === '') {
            document.getElementById(e_id).type = 'text';
            $(this).val(p);
          }
        });
      }
    });
    $('form').submit(function() {
      //Interrupt submission to blank out input fields with placeholder values
      $("input[type=text]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
          $(this).val('');
        }
      });
     $("input[type=password]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
           $(this).val('');
        }
      });
    });
  }
});




placeholder