清除包含单击说明或输入文本时的文本区域？答案

【问题标题】：Clear textarea containing instructions on click or when text is entered?清除包含单击说明或输入文本时的文本区域？
【发布时间】：2018-02-26 07:15:31
【问题描述】：

我是 JavaScript 新手，所以我不知道在哪里可以做到这一点。

我有一个网页，用户可以在其中在文本区域框中输入消息。我想在盒子里有他们的说明，这只是一个例子：

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

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

我在网页上看到过这种做法，但我找不到任何可以检查的。

【问题讨论】：

使用<textarea>的placeholder属性。
可能重复stackoverflow.com/questions/1626107/…
Text in HTML Field to disappear when clicked?的可能重复

标签： javascript jquery html

【解决方案1】：

使用占位符来做到这一点

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

【讨论】：

【解决方案2】：

您应该将其替换为 placeholder。

&lt;textarea name="message" rows=10 cols=80 placeholder="Enter your text here"&gt;&lt;/textarea&gt;

或者你可以通过bindingblur 和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>

【讨论】：

当用户点击它时，它什么也不做。我也希望它在点击时清除文本，而不仅仅是在他们输入文本时。
@EdwardCoast，现在看看。
此 JavaScript 放置在网页中的哪个位置是否重要？我已经有一个调用函数的 onclick 按钮。这个事件是不是就像点击一个按钮，所以我可以把它放在任何地方？
你也应该使用click函数。
在此示例中，click 也适合代替 focus 以满足您的要求。

【解决方案3】：

您好，如果您想使用 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>

【讨论】：

这可能是不可取的，因为如果用户输入一些文本，离开控件，然后重新进入控件，它将删除他们输入的内容。
还为 blur 方法添加事件处理程序以重新初始化值。

【解决方案4】：

将焦点事件附加到您的文本区域。

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

【讨论】：

这在网页流中的哪个位置被放入 JavaScript 中？我有一个调用函数的点击按钮。这会是该功能的一部分吗？
函数之前。这甚至会在客户专注于文本区域时听取客户的行动并采取行动。为您更新了带有 cmets 的 sn-p。