使用以下命令访问表单中的文本区域

Question

请您提供以下建议：

我有一张注册表，在那个文本区域内

<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获得元素会起作用，但事实并非如此。 没有其他名称/标识重复。

任何帮助，不胜感激。 多谢你们

Answer 1

使用占位符属性：

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

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

Answer 3

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

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

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

Answer 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代码，该代码也将起作用。

使用以下命令访问表单中的文本区域

问题描述

4 个解决方案

解决方案1
1 2013-01-17 16:10:29

解决方案2
0 2013-01-17 16:14:53

解决方案3
0 2013-01-17 16:20:58

解决方案4
0 2013-01-17 17:31:12

使用以下命令访问表单中的文本区域

问题描述

4 个解决方案

解决方案1 1 2013-01-17 16:10:29

解决方案2 0 2013-01-17 16:14:53

解决方案3 0 2013-01-17 16:20:58

解决方案4 0 2013-01-17 17:31:12

解决方案1
1 2013-01-17 16:10:29

解决方案2
0 2013-01-17 16:14:53

解决方案3
0 2013-01-17 16:20:58

解决方案4
0 2013-01-17 17:31:12