如何通过javascript运行占位符,即使在ie6中运行所有浏览器

时间:2012-11-24 11:50:57

标签: javascript placeholder

我已经为输入“值属性”创建了占位符,但是value属性正在用于其他目的,所以我如何制作其他属性,如占位符或任何其他自制...

我的值属性代码在所有浏览器中工作。所以任何人都建议我如何为占位符或任何其他输入属性创建这样的东西。

/*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';              
    }
}   

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

我想这可以让你开始。

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>