使用访问表单中的文本区域答案

【问题标题】：Accessing a text area within a form using使用访问表单中的文本区域
【发布时间】：2013-01-17 16:08:51
【问题描述】：

请您提供以下建议：

我有一个注册表单，其中有一个文本区域

<form id="register" name="register" method="post" action="register.php">

<textarea rows="5" id="bio" name="bio" method="post">Biographical information</textarea>

</form>

我一直在尝试使用 java 脚本为 onfocus 和 onblur 事件创建一个事件处理程序，以便在焦点上删除默认文本并在模糊时恢复，如下所示：

var bioField = document.getElementById("bio");

bioField.onfocus = function() {
    if (bioField.value == "Biographical information") {
        bioField.value = "";
    }
};

bioField.onblur = function() {
    if (bioField.value == "") {
        bioField.value = "Biographical information";
    }
};

我认为通过 id 获取元素会起作用，但似乎并非如此。不存在其他重复的名称/ID。

非常感谢任何帮助。谢谢大家

【问题讨论】：

如果这仍然不适合您，可以创建一个具有更多上下文的 JSFiddle，以便我们确定错误在哪里。还要确保您正在检查控制台是否有错误。
错误控制台显示什么？ TypeError: bioField is null?

标签： javascript events dom onblur onfocus

【解决方案1】：

使用占位符属性：

<textarea rows="5" id="bio" name="bio" method="post" placeholder="Biographical information"></textarea>

【讨论】：

如果您不需要与旧版浏览器兼容，这是一个很好的解决方案。

【解决方案2】：

它工作正常，也许问题是占位符默认为“传记信息”，而脚本正在测试“关于你的一切”。您在我发布此内容时所做的更改正是您所需要的。

var bioField = document.getElementById("bio");

bioField.onfocus = function() {
    if (bioField.value == "Biographical information") {
        bioField.value = "";
    }
};

bioField.onblur = function() {
    if (bioField.value == "") {
        bioField.value = "Biographical information";
    }
};

http://jsfiddle.net/YeaTQ/1/

【讨论】：

谢谢伙计们。我无法运行脚本，我正在使用带有 chrome 扩展的 phpstorm 进行实时编辑，我不推荐它。
大家好，只是为了更新这个线程，问题是我的脚本正在头部执行，并且元素尚未创建是的。我添加了这段代码，并且已经解决了这个问题。

【解决方案3】：

我有根据的猜测是，您已将代码原样放入 <script> 标记中 <head> 中，因此当脚本运行时，表单尚未加载。

将您的<script> 移动到表单下方或使用window.onload 包装所有内容：

window.onload = function(){
   // Code goes here
};

【讨论】：

【解决方案4】：

您有两种解决方案：

为了不使用您编写的javascript代码，请使用以下代码：

<textarea cols="30" rows="5" id="bio" name="bio" onfocus="this.value = '' " onblur="this.value = 'All about you'">Biographical information</textarea>
我认为 javascript 代码位于控件之前（我猜在标题中），因此，onfocus 和 onblur 属性未初始化。您必须将脚本放在文档的末尾（标签之前）。
此外，您的脚本正在搜索另一个文本（“关于你的一切”），而不是内部的当前文本（“传记信息”）。即使您在文档的位置插入 javascript 代码，该代码也将起作用。

【讨论】：