Question

我有一段HTML代码，它是一个有两个输入的表单的一部分。通过CSS，我设法使与每个输入相关联的标签位于相应的输入内，作为占位符。

现在，有了一些标准的JS（我不害怕JQuery），我想捕捉用户在输入上做的事件（即鼠标点击或键盘按下）并动态改变外观和感觉标签

http://jsfiddle.net/8nBAQ/2/

我需要满足的条件是：

当用户第一次点击输入时。标签将颜色更改为浅灰色。点击后，如果用户输入了一个字符，标签就会消失，而是显示你刚刚按下的字符。
当用户第一次点击输入时。标签将颜色更改为浅灰色。点击后，如果用户点击或标签远离输入，标签会将颜色更改回原来的黑色状态。
在输入中输入几个字符后，如果用户决定删除整个字符集，方法是按退格键删除每个字符，直到没有剩下，或用鼠标突出显示整个字符集并按下删除键，标签出现但呈浅灰色。

你可以用JS提供的任何帮助都很棒！

由于 -JaXL

Answer 1

这是我的解决方案。我在输入标签和标签

中添加了以下内容

    <label class="label-inside" for="input1" id="input1_label" title="Enter input 1">Input 1</label>
  <ul class="form-input">
    <li>
      <input type="text" id="input1" name="myInput1" value="" autocomplete="off" title="Enter Input 1" onblur="handleBlur(this, document.getElementById('input1_label'))" 
      onkeydown="handleFirstClick(event, this, document.getElementById('input1_label'))"
      onkeyup="handleKey(this, document.getElementById('input1_label'))" />
    </li>
  </ul>

这是我的Javascript

<script>


    function handleBlur(input, label )
    {
        if ( !input.value || input.value.length == 0)
        {
            label.style.display = 'block';
            label.style.color = 'black';
            label.clickedBefore = false;
        }
    }

    function handleFirstClick(e, input, label )
    {
        if ( !label.clickedBefore )
        {
            label.clickedBefore = true;
            e.preventDefault();
            label.style.color = 'red';
        }

    }

    function handleKey(input, label)
    { 
      console.log("handling key up : " + input.value.length);
      label.style.display = 'none';

      if (!input.value || input.value.length == 0 )
      {
         label.style.display = 'block';
         label.style.color = 'red';
      }      
     }
</script>

如果需要其他东西，请告诉我。

编辑：添加代码以根据input_id一次添加所有处理程序。

window.onload = function(){

    console.log("windows loaded");
    var labels = {}
    var all_labels = document.getElementsByTagName("label");
    for ( var i = 0; i < all_labels.length; i++)
    {
        labels[all_labels[i].getAttribute("for")] = all_labels[i];
    }


    function attachHandlers( input_id )
    {
        var input = document.getElementById(input_id);
        var label = labels[input_id];
        input.onclick = function(e){handleFirstClick(e, input, label)};
        input.onkeyup = function(e){handleKey(input, label)};
        input.onblur = function(e){handleBlur(input, label)};
    }

     var attachInput = ["input1"];
     for ( var j =0; j <attachInput.length; j++)
     {
         attachHandlers(attachInput[j]);
      }

}

基于事件处理程序更改的动态标签

1 个答案: