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>