zoukankan      html  css  js  c++  java
  • javascript占位符

    传统javascript:

    The text is inserted in the value attribute. On focus, it checks if the value is "search" and returns empty to clear the field. If the value is empty, it returns "search." As you can see, this way is not an efficient way because each field has to be checked.

    <input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">

    Now with HTML5 placeholder, it is more semantic to use placeholder than value attribute. However, placeholder text is not supported by all browsers. To make it cross-browser, Modernizr and jQuery come in handy here.

    Modernizr is used here to check if placeholder is supported. If placeholder is not supported, the jQuery code will run. It finds all elements with placeholder attribute and stores in a variable. It then compares the input value with the placeholder attribute. If the input value is empty, it will display the placeholder text and add a "placeholder" class to the input field. View Demo.

    To use this on your site, download a copy of Modernizr and jQuery and paste the following code any where in your html page (be sure the jquery.js and modernizr.js file is in correct path).

    <script src="jquery.js"></script>
    <script src="modernizr.js"></script>
    
    <script>
    $(document).ready(function(){
    
    if(!Modernizr.input.placeholder){
    
        $('[placeholder]').focus(function() {
          var input = $(this);
          if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
          }
        }).blur(function() {
          var input = $(this);
          if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
          }
        }).blur();
        $('[placeholder]').parents('form').submit(function() {
          $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
              input.val('');
            }
          })
        });
    
    }
    
    </script>

    via:http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

    另外一个原生的javascript实现;

    function add_placeholder (id, placeholder)
    {
        var el = document.getElementById(id);
        el.placeholder = placeholder;
     
        el.onfocus = function ()
        {
            if(this.value == this.placeholder)
            {
                this.value = '';
                el.style.cssText  = '';
            }
        };
     
        el.onblur = function ()
        {
            if(this.value.length == 0)
            {
                this.value = this.placeholder;
                el.style.cssText = 'color:#A9A9A9;';
            }
        };
     
        el.onblur();
    }
     
    // Add right before </body> or inside a DOMReady wrapper
    add_placeholder('myInputField', 'IE Placeholder Text');

    <inputtype="text"name="myInputField"value=""placeholder="HTML5 Placeholder Text"id="myInputField">

    参考:https://gist.github.com/jaywilliams/1105055#file-example-html

  • 相关阅读:
    题解 BZOJ1026 & luogu P2657 [SCOI2009]windy数 数位DP
    BZOJ 1867 [Noi1999]钉子和小球 DP
    P5057 [CQOI2006]简单题 前缀异或差分/树状数组
    P2051 [AHOI2009]中国象棋 大力DP
    P4208 [JSOI2008]最小生成树计数
    BZOJ 2440 [中山市选2011]完全平方数 二分+容斥
    Luogu P1951 收费站_NOI导刊2009提高(2) 二分 最短路
    Luogu P3527 [POI2011]MET-Meteors 整体二分
    Luogu P4109 [HEOI2015]定价 贪心
    Luogu P2114_[NOI2014]起床困难综合症 贪心
  • 原文地址:https://www.cnblogs.com/youxin/p/2992210.html
Copyright © 2011-2022 走看看