javascript - 我如何通过在所有浏览器甚至 ie6 中运行的 javascript 制作占位符

Question

我已经为输入“值属性”制作了占位符，但值属性用于其他目的，所以我怎样才能为其他属性制作占位符或任何其他自制..

我的值属性代码适用于所有浏览器..所以有人建议我如何为占位符或任何其他输入属性制作这样的东西。

/*For placeholder*/ 
function ClearPlaceHolder(input) {      
    //var plc = document.getElementById(input.id).value;
    if (input.value == input.defaultValue){
        input.value = "";
        document.getElementById(input.id).style.color = '#444444';
    }
}

function SetPlaceHolder (input) {
   if (input.value == "") {
        input.value = input.defaultValue;
        document.getElementById(input.id).style.color = '#c9c9c9';              
    }
}   

Answer 1

您可以使用函数来绑定事件，而不是使用事件属性来调用现有函数。然后您可以简单地将默认值发送到函数中：

function initPlaceHolder(input, defaultValue) {
  input.onfocus = function() {
    if (input.value == defaultValue){
      input.value = "";
      input.style.color = '#444444';
    }
  };
  function remove() {
    if (input.value == "") {
      input.value = defaultValue;
      input.style.color = '#c9c9c9';              
    }
  }
  input.onblur = remove;
  remove();
}

用法：

<input type="text" id="me" />

<script type="text/javascript">
initPlaceHolder(document.getElementById("me"), "Enter name");
</script>

演示：http: //jsfiddle.net/Guffa/RFm5e/

Answer 2

我想这可以让你开始。

Qty1 : <input type="text" placeholder="numbera" name="qty" id="qty"/><br>
Qty2 : <input type="text" placeholder="numberb" name="qty" id="qty2"/><br>

<script type="text/javascript">
    $(document).ready(function(){
        if($.browser.msie){
            var inpElements = $('[placeholder]');
            $(inpElements).each(function(){
                $(this).css('color','#aaaaaa').val($(this).attr('placeholder'));
            });
            $('[placeholder]').one('focus', function(){
                $(this).val('');
            });
        }
    }); 
</script>