javascript - 使用 JavaScript 模仿占位符行为

Question

我正在尝试使用 javascript(和 jQuery)重新创建或模仿(HTML 的)占位符行为。

谁能告诉我如何实现这一目标？我尝试使用以下代码:

$(document).ready(function () {
    //On init:
    var initPlaceholderTxt = $("p").text();

    //Execution:

    //Using this, placeholder will not display correct information, 
    //lacking a previous clicked character:
    $("#test").on("keydown", function (event) {
        var value = $(this).val();
        $("p").text(value);
    });

    /*
    //Core feature:
     $("#test").keyup(function() {
          var value = $( this ).val();
      if(value != null && value != "") {
                $("p").text(value);
      }
      else {
            $("p").text(initPlaceholderTxt);
      }
    });

    //Make characters appear more dynamically or faster:
    $("#test").keydown(function() {
          var value = $( this ).val();
          $("p").text(value);
    });
    */
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="test"></textarea>
<p>Placeholder text</p>
<textarea placeholder="example"></textarea>

JSFiddle

我让主要部分工作了，但是我正在努力让它更有活力。当用户在定义了占位符的默认输入中键入内容时，按下某个键的那一刻，一个字符将出现在框中，占位符将消失。最后一部分似乎不会发生在我当前的代码中。

当我按下一个键时，占位符已经尝试在将新字符添加到输入之前更改其文本值。

Most会说解决这个问题的方法是使用 keyup。但是，使用 keyup 也有一个缺点，因为它不会让字符在按下某个键时动态出现在 bat 的右侧。请让我知道如何解决这个问题。

编辑: 底部文本区域是显示预期行为的示例。段落元素的行为/行为应该类似于您在示例中看到的(任何)占位符文本。

Answer 1

As I press a key down, the placeholder already tries to change its text value before a new character has been added to the input.

However there is a downside of using keyup as well, as it is not making characters dynamically appear right of the bat when pressing a key.

那为什么不同时使用 keyup和 keydown ？

对于 .on() 的第一个参数，您可以在以空格分隔的列表中使用多个事件。 .

编辑

The bottom text area is an example to show the intended behaviour.

我使用添加/删除类编辑我的演示，这使得第二个 <textarea>占位符灰色...注意我给它一个 id ;)

$(document).ready(function() {
  //On init:
  var initPlaceholderTxt = $("p").text();
  
  //Execution:
  $("#test").on("keyup keydown", function( event ) {  
    var value = $( this ).val();
    $("p").text(value); // Just for the testing, I assume...
    
    $("#mainTextArea").text(value).removeClass("placeholder");
    
    
    // Restore the placeholder if the input is empty
    if(value==""){
      $("p").text(initPlaceholderTxt); // Just for the testing, I assume...
      
      $("#mainTextArea").text(initPlaceholderTxt).addClass("placeholder");
      
    }
  });

});

.placeholder{
  color:grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="test"></textarea>
<p>Placeholder text</p>
<textarea placeholder="example" id="mainTextArea"></textarea>

没有 <p> 的简单演示元素和 placeholder属性:

$(document).ready(function() {
  //On init:
  var initPlaceholderTxt = "Placeholder text";
  $("#mainTextArea").text(initPlaceholderTxt).addClass("placeholder");
  
  //Execution:
  $("#test").on("keyup keydown", function( event ) {  
    var value = $( this ).val();    
    $("#mainTextArea").text(value).removeClass("placeholder");
    
    // Restore the placeholder if the input is empty
    if(value==""){
      $("#mainTextArea").text(initPlaceholderTxt).addClass("placeholder");
    }
  });

});

.placeholder{
  color:grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="test"></textarea>
<br>
<textarea id="mainTextArea"></textarea>