Javascript 根据事件处理程序更改的动态标签

我有一个HTML片段，它是表单的一部分，其中有两个输入。通过CSS，我成功地将与每个输入相关联的标签放置在相应的输入中，作为占位符

现在，使用一些标准的JS（恐怕不是JQuery），我想捕获用户在输入上所做的事件（即鼠标单击或键盘按下），并动态更改标签的外观

我需要满足的条件是：

当用户第一次单击输入时。标签颜色变为浅灰色。单击后，如果用户随后输入一个字符，则标签将消失，而显示您刚才按下的字符

当用户第一次单击输入时。标签颜色变为浅灰色。单击后，如果用户随后单击或远离输入，则标签的颜色将更改回原来的黑色状态

在输入中输入几个字符后，如果用户决定删除整个字符集，方法是按backspace删除每个字符，直到没有剩余字符，或者用鼠标突出显示整个字符集，然后按delete键，则标签将显示，但颜色为浅灰色

任何帮助，你可以提供与JS将是伟大的

谢谢

---

-JaXL

这是我的解决方案。我在输入标记和标签中添加了以下内容

    <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>

输入1

这是我的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.value | | input.value.length==0）
{
label.style.display='block'；
label.style.color='black'；
label.clickedBefore=false；
}
}
函数句柄首次单击（e、输入、标签）
{
如果（！label.clickedBefore）
{
label.clickedBefore=true；
e、 预防默认值（）；
label.style.color='red'；
}
}
功能手柄键（输入、标签）
{ 
log（“处理键向上：+input.value.length”）；
label.style.display='none'；
如果（！input.value | | input.value.length==0）
{
label.style.display='block'；
label.style.color='red'；
}      
}

如果还需要别的东西，请告诉我

编辑：添加代码以根据输入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]);
      }

}

window.onload=function（）{
console.log（“windows加载”）；
变量标签={}
var all_labels=document.getElementsByTagName（“标签”）；
对于（变量i=0；i对于（var j=0；j，我使用了“红色”而不是浅灰色..更容易调试谢谢你的建议！我刚刚尝试访问你的JF，但它似乎不起作用..你能检查一下吗..我是一个新的小提琴手，出于某种原因，它没有保存我以前的更改..可能需要单击“更新”。是的，这一个有效。看了一眼后，如果你点击输入两次，它就会变成黑色（即，你应该点击远离输入的情况）当它应该是红色时。此外，当您输入第一个字符时，红色文本会出现，但它不会显示该字符，只会在输入第二个字符后出现。此条件应清除输入并显示您正在键入的内容。哦，好吧。我可能没有正确理解您的意思。只需将
onkeydown
更改为
onclick
。这应该可以解决问题。我更新了小提琴。它现在能正常工作吗？