清除包含单击中或输入文本时的指令的文本方面

Question

我是javaScript的新手，所以我不确定在哪里看。

我有一个网页，用户可以在文本框中输入消息。我想在框中为他们提供指示，这只是一个例子：

<TEXTAREA NAME="message" ROWS=10 COLS=80>Enter your text here</TEXTAREA>

当用户在此文本框中单击或开始输入文本时，我希望它立即清除说明文本。

我已经在网页上看到了这一点，但是我找不到任何可以检查的。

Answer 1

您应该只用placeholder替换它。

<textarea name="message" rows=10 cols=80 placeholder="Enter your text here"></textarea>

或者您可以通过binding事件处理程序进行blur和focus。

执行此操作。

let message="Enter your text here";
$('textarea').focus(function(){
  if($(this).val() === message)
       $(this).val('');
});
$('textarea').blur(function(){
  if($(this).val().length === 0)
       $(this).val(message);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="message" rows=10 cols=80>Enter your text here</textarea>

Answer 2

使用占位符进行此操作

<TEXTAREA NAME="message" ROWS=10 COLS=80 placeholder="Enter your text here"></TEXTAREA>

Answer 3

将在焦点上附加到您的文本区域。

//assigns value to yext area
    document.getElementById("textarea").value = "this is an example";
    //does focus event
        document.getElementById("textarea").addEventListener("focus", myFocusMethod, true) ;
        function myFocusMethod(){
        document.getElementById("textarea").value = "";
        }
    //does click
    function doClick() {
    }
<TEXTAREA id="textarea" NAME="message" ROWS=10 COLS=80 onclick="doClick();"></TEXTAREA>

Answer 4

您好，如果要使用JavaScript或JQuery，请尝试以下代码

     $(function() {
    var defaultText = 'Enter your text here';
    $('#txt').focus(function() {
        defaultText = $(this).val();
        $(this).val('');
    }).blur(function() {
    if($(this).val().length === 0)
        $(this).val(defaultText); 
        
     });
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<TEXTAREA NAME="message" id="txt" ROWS=10 COLS=80 >Enter your text here</TEXTAREA>