如何在点击时清除文本区域？

Posted 2023-05-07

【中文标题】如何在点击时清除文本区域？

【英文标题】：How to clear textarea on click?

【发布时间】：2011-02-16 12:53:08

【问题描述】：

给定一个<textarea>，默认值如下：

<textarea>Please describe why</textarea>

用户点击编辑字段时如何清除默认值？

【问题讨论】：

请使用真实的<label>s，不要滥用默认值来充当假标签。除了语义上的垃圾之外，这给屏幕阅读器用户带来了一个真正的问题，因为当元素获得焦点时，告诉他们在字段中放置什么的唯一信息消失了......并且屏幕阅读器不会读出字段中的文本，直到它获得焦点！

【参考方案1】：

你的 javascript：

function clearContents(element) 
  element.value = '';

还有你的 html：

<textarea onfocus="clearContents(this);">Please describe why</textarea>

我假设您希望让它更健壮一点，以免在第二次聚焦时擦除用户输入。 Herearefiverelateddiscussions&articles。

这是 David Dorward 在上面的 cmets 中提到的 (much better) idea：

<label for="explanation">Please describe why</label>
<textarea name="explanation" id="explanation"></textarea>

【讨论】：

for 属性需要匹配一个id，而不是一个名字！ （否则会与单选按钮不兼容）

你应该去掉 javascript: 位。这是一个没有 goto 的标签。 developer.mozilla.org/en/Core_JavaScript_1.5_Reference/… 如果您使用内部事件属性，则需要指定使用的语言，但这是通过元标记而不是标签实现的：w3.org/TR/html4/interact/scripts.html#h-18.2.2.1

奇怪。 label 的第二个想法对我不起作用。

【参考方案2】：

可以使用 HTML5 中引入的占位符属性：

<textarea placeholder="Please describe why"></textarea>

这会将您的填充文本设置为灰色，当用户单击文本字段时，该填充文本会自动消失。此外，如果它失去焦点并且文本区域为空白，它将重新出现。

【讨论】：

这不是真的。当用户开始书写而不是点击时，它就会消失。

【参考方案3】：

这是你的 javascript 文件：

function yourFunction()
     document.getElementById('yourid').value = "";
;

这是html文件：

    <textarea id="yourid" >
    Your text inside the textarea
    </textarea>
    <button onClick="yourFunction();">
     Your button Name
     </button>

【参考方案4】：

试试：

<input name="mytextbox" onfocus="if (this.value=='Please describe why') this.value = ''" type="text" value="Please Describe why">

【讨论】：

这不是文本区域，所以 -1。这只会删除示例文本，所以 +1。

【参考方案5】：

你的意思是这样的文本字段吗？

<input type="text" onblur="if(this.value == '') this.value='SEARCH';" onfocus="if(this.value == 'SEARCH') this.value='';" size="15" value="SEARCH" name="xSearch" id="xSearch">

或者这个用于textarea？

<textarea id="usermsg" rows="2" cols="70" onfocus="if(this.value == 'enter your text here') this.value='';" onblur="if(this.value == '') this.value='enter your text here';" >enter your text here</textarea>

【讨论】：

我的版本只清除默认值。 Dolph 的解决方案会清除 textfield/textarea 中的所有内容，而不仅仅是默认值。

【参考方案6】：

目前我所知道的最佳解决方案：

<textarea name="message" onblur="if (this.value == '') this.value = 'text here';"   onfocus="if (this.value == 'text here') this.value = '';">text here</textarea>

【参考方案7】：

<textarea name="post" id="post" onclick="if(this.value == 'Write Something here..............') this.value='';" onblur="if(this.value == '') this.value='Write Something here..............';" >Write Something here..............</textarea>

【参考方案8】：

你可以试试这个代码，

<textarea name="textarea" cols="70" rows="2" class="searchBox" id="textarea" onfocus="if(this.value == 'Please describe why') this.value='';" onblur="if(this.value == '') this.value='Please describe why';">Please describe why</textarea>

【参考方案9】：

jQuery 属性 val() 应该可以完成这项工作。 你可以$('#YourTextareaID').click(function(e) e.target.value = ''; )。

【参考方案10】：

如果您有来自数据库的动态数据，这是一个解决方案... 'data' 变量代表数据库数据。 如果尚未保存数据，则会显示占位符。 一旦用户开始输入，占位符就会消失，然后他们可以输入文本。 希望这对某人有帮助！

// If data is NOT saved in the database
if (data == "") 
    var desc_text = "";
    var placeholder = "Please describe why";
// If data IS saved in the database
 else 
    var desc_text = data;
    var placeholder = "";


<textarea placeholder="'+placeholder+'">'+desc_text+'</textarea>

【参考方案11】：

不需要脚本。您可以使用onblur 和onfocus 结合placeholder 使文本消失并出现在textarea上。

<textarea onblur="this.placeholder='Write something..'" onfocus="this.placeholder=''" placeholder="Write something.." name="" cols="40" rows="4"></textarea>

【参考方案12】：

<textarea onClick="javascript: this.value='';">Please describe why</textarea>

【讨论】：

此解决方案每次用户点击它都会清除文本字段。