Question

我希望有类似<textarea>Welcome, click here to type.</textarea>

的内容

然后在用户点击文本区域时清除。显然。

但是

在有人提到此网站上存在重复此问题之前，还有其他详细信息未在答案中提及。例如：

我已经看到，可以在没有<textarea>且只有onclick()的情况下清除<textarea id="someid">。我只是不知道他们是怎么做到的，我想这样做。我不仅喜欢我的代码清洁，而且我想知道这是如何可能的。（我在想onClick()以某种方式进入<head><script type="text/javascript"></script></head>？）

一旦有人输入内容并再次点击文本区域，我也希望<textarea> 不清除。即当用户再次点击文本区域以编辑输入文本的某一部分时。

我不太了解Javascript，但这是我看到它工作的方式：

如果<textarea>与值Welcome, click here to type匹配;一旦用户点击文本区域，它就应该清除文本。
如果<textarea>为空并且不再处于焦点，则应再次返回值“Welcome, click here to type.”。

这意味着再次单击文本区域不会清除文本，这会阻止文本在用户输入框中的内容后被清除。

先谢谢你帮助我！您对此事的知识将不胜感激。：）

Answer 1

在<head>中，您可以执行以下操作：

<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时，代码将立即工作，而使用上述方法，如果用户在加载文档的其余部分之前单击textarea，则不会创建事件处理程序，也不会发生任何事情。因此，如果您不介意在标记中添加一个小脚本，建议删除window.onload部分，而是执行以下操作：

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

Answer 2

首先，如果您的网站的用户使用的是现代网络浏览器，那么有一个相对较新的功能称为占位符，可以免费执行您想要的操作 - 即根本不需要额外的代码。

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

然而，正如我所说，这仅适用于相对较新的浏览器;旧浏览器会忽略它。该字段仍然可以正常工作，所以你不会破坏旧浏览器中的任何东西;他们只是不会显示占位符。如果你能忍受，那将是你的最佳选择。

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

试试这个例子：http://plugins.jquery.com/project/placeholder （但要注意，还有其他几个人可以做同样的工作）

Answer 3

area = document.getElementById('someid');
area.onfocus = function() {
    if (area.value == 'DEFAULT VALUE HERE') area.value = '';
};

顺便说一下，focus比click更好，因为它涵盖了使用键盘的点击和标签，这是另一种焦点形式。

Answer 4

onclick="foobar"只是bind event handlers的一种方式。最常见的（最好的）实践是纯粹用JavaScript绑定事件处理程序，而不是将JavaScript绑定与HTML混合。（提供的链接不提供确保您需要的DOM对象可以操作的最佳实践。但是，对于学习来说，这已经足够了，当您继续使用JavaScript框架时，它将为您处理（除了浏览器不一致之外，还有））。

此外，您可能需要检查focus事件而不是click事件，因为它会处理其他情况，例如被标记为。

使用Javascript清除<textarea>？</textarea>

4 个答案: