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获取元素会起作用，但它似乎不是。没有其他重复的名称/ ID。

任何帮助非常感谢。谢谢你们

Answer 1

使用占位符属性：

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

Answer 2

它工作正常，也许问题是占位符默认为“传记信息”，脚本正在测试“All about you”。您在发布此消息时所做的更改正是您所需要的。

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

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

将<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属性未初始化。您必须将脚本放在文档的末尾（标记之前）。
此外，您的脚本正在搜索另一个文本（“All about you”）而不是内部的当前文本（“传记信息”）。即使您在文档的位置插入了javascript代码，也会使用代码。

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

4 个答案: