清算<；textarea>；使用Javascript？

我想要一些类似“欢迎，单击此处键入”的内容。

然后，当用户点击文本区域时，清除

但是

在任何人提到此网站上存在此问题的副本之前，已经有其他细节未在回答中提及。例如：

我已经看到，可以在没有

onclick（）

的情况下清除

，而只使用

。我只是不知道他们是怎么做到的，我想这样做。我不仅喜欢干净的代码，还想知道这是怎么可能的。（我想，

onClick（）

不知何故就在

？）

我还希望在有人键入内容并再次单击文本区域后，

不会被清除。i、 e.当用户再次单击文本区域以编辑输入的文本的特定部分时

我对Javascript了解不多，但我认为它是这样工作的：

如果

与值

Welcome匹配，请单击此处键入
；一旦用户点击文本区域，它就会清除文本

如果

为空且不再聚焦，则应返回值“

欢迎，单击此处再次键入。

” 这意味着再次单击文本区域将无法清除文本，这将阻止用户在框中键入内容后清除文本

提前谢谢你帮了我的忙！非常感谢您对此事的了解。：）

area=document.getElementById（'someid'）； area.onfocus=函数（）{ 如果（area.value=='此处的默认值'）area.value=''； }; 顺便说一句，

focus

比

click

更好，因为它涵盖了使用键盘的点击和制表操作，这是另一种聚焦形式。

onclick=“foobar”

只是一种方式。通常（最佳？）的做法是纯粹用JavaScript绑定事件处理程序，而不是将JavaScript绑定和HTML混合。（提供的链接没有提供确保您所需的DOM对象可供操作的最佳实践。但是，对于学习来说，这已经足够了，当您继续使用JavaScript框架时，它将为您处理（除了浏览器不一致等问题）

---

此外，您可能希望检查

焦点

事件，而不是

单击

事件，因为这会处理其他情况，例如被选项卡锁定。

首先，如果您网站的用户使用现代web浏览器，有一个相对较新的特性叫做占位符，它可以免费做你想做的事情——即根本不需要额外的代码

  <textarea name="mytextfield" placeholder="Click here to type"></textarea>

然而，正如我所说，这只适用于相对较新的浏览器；较旧的浏览器将忽略它。不过，该字段仍然可以正常工作，因此在旧浏览器中使用该字段不会破坏任何功能；他们只是不显示占位符。如果你能接受，这将是你最好的选择

如果这还不够好，那么您需要使用Javascript。如果您使用的是JQuery，那么有一些JQuery插件可以为您完成所有工作，这使得它几乎与占位符选项一样简单

试试这个例子： （但请注意，还有其他几个人可以做相同的工作）

在

中，您可以执行以下操作：

<script type="text/javascript">
    var textAreaDefaultText = "Welcome, click here to type.";

    function textAreaFocus(textarea) {
        if (textarea.value == textAreaDefaultText) {
            textarea.value = "";
        }
    }

    function textAreaBlur(textarea) {
        if (textarea.value == "") {
            textarea.value = textAreaDefaultText;
        }
    }

    window.onload = function() {
        var textarea = document.getElementById("your_textarea_id");
        textarea.onfocus = function() { textAreaFocus(this); };
        textarea.onblur = function() { textAreaBlur(this); };
    };
</script>

---

说得好，+1。但是啊。。。我应该在文档中的何处放置此代码段以使其工作？作为一个附加（可选）想法，应该可以根据

area.defaultValue

而不是预定义的字符串进行检查。但这是令人毛骨悚然的。

innerHTML

不获取字段

值

，它反映了字段的原始内容，即

defaultValue

，但IE上由于错误而导致的内容除外。不要在表单字段上使用

innerHTML

或

getAttribute（'value'）

，因为它不会做您认为的事情。相反，正如佩卡所建议的那样，将

area.value

与

area.defaultValue

进行比较。哎呀，我不小心做了。现在就换吧。我可以取消我的否决票吗派斯：逻辑是错误的<代码>=应该是

==

。此外，这并没有解决文本区域失去焦点时会发生什么的问题。+1。我没有遇到过。这是HTML5中的一个新属性，显然在Safari 5、Chrome 6和Firefox 4中都得到了支持。我喜欢这个答案，但遗憾的是，我必须在IE6=（我认为这里没有“明显的优势”，除非页面加载速度非常慢或需要将其作为页面UI的关键部分）（我在想搜索引擎，尽管默认情况下它们不会关注输入吗？），当然不是与使用内联事件相比。这无疑是一个优势，所以我不明白你的观点。你最终使用脚本和标记这一事实可以说是一个劣势，我不否认。我客观地提出了这两个选项，所以我认为没有理由投反对票。易江：哦！我真的是个白痴。忽略我。索尔很抱歉这样指责你。非常感谢你！这正是我想要的。简直太美了！：）

<script type="text/javascript">
    var textAreaDefaultText = "Welcome, click here to type.";

    function textAreaFocus(textarea) {
        if (textarea.value == textAreaDefaultText) {
            textarea.value = "";
        }
    }

    function textAreaBlur(textarea) {
        if (textarea.value == "") {
            textarea.value = textAreaDefaultText;
        }
    }

    window.onload = function() {
        var textarea = document.getElementById("your_textarea_id");
        textarea.onfocus = function() { textAreaFocus(this); };
        textarea.onblur = function() { textAreaBlur(this); };
    };
</script>

<textarea id="your_textarea_id"
    onfocus="textAreaFocus(this)"
    onblur="textAreaBlur(this)">Welcome, click here to type.</textarea>