Question

我是html和javascript的新手。我一直在尝试用javascript修改输入元素的值。目的是在用户单击时将该字段设置为空白。代码如下：

<html>
<head>
<script>
function fn(){
if(document.input1.value=="name")
document.input1.value="";
}</script></head>
<body>
<input name="input1" type="text" value="name" onClick="fn()"/>
</body></html>

但是，此代码无效。我正在使用Chrome浏览器。当我使用表单标记环绕输入标记时，在脚本中我使用document.form.input1.value代码可以正常工作。问题出在哪儿？我并不关心如何在用户点击时清空该字段，而是如何从函数中访问该值。提前谢谢。

Answer 1

这会好得多（使用placeholder）：

<html>
  <body>
    <input name="input1" type="text" placeholder="name" />
  </body>
</html>

这是自我解释的。如果您需要解释，请告诉我。

Answer 2

或者替代方案可能只是使用“占位符”属性，这不需要任何额外的JavaScript。 See my jsfiddle

唯一的区别是输入新文本时文本将消失，而不是单击时。好处是，当字段被清除时，占位符文本将自动再次返回。

Answer 3

您可能还想尝试onFocus和onBlur事件：

<html>
  <head>
   <script>
     function fn(){
       if(document.getElementById("input1").value=="name")
         document.getElementById("input1").value="";
     }
     function fn2(){
       if(document.getElementById("input1").value=="")
         document.getElementById("input1").value="name";
     }
    </script>
  </head>
  <body>
   <input id="input1" name="input1" type="text" value="name" onFocus="fn();" onBlur="fn2();"/>
  </body>
</html>

<强> EXAMPLE

修改：

如果您希望按名称获取元素，则可以使用document.getElementsByName，但是，这将返回所有匹配元素的列表，然后您将其视为匹配元素的数组。在上述情况下，您可以使用document.getElementById("input1")
切换document.getElementsByName("input1")[0]

Answer 4

<html>
<head>
<script>
function fn(){
if(document.getElementById("input1").value=="name")
document.getElementById("input1").value="";
}</script>
</head>
<body>
<input id="input1" type="text" value="name" onClick="fn()"/>
</body>
</html>

Answer 5

你听说过Jquery吗？它是一个javascript库，可以简化您的工作！

从jquery网站下载jquery，并使用

将其包含到您的项目中

<script type="text/javascript" src="[[jquery file.js]]"></script>

然后你可以使用：

<script>
    $("#[[yourinputid]]").click(
    function()
    {
    if ($(this).val() == "name")
       $(this).val("")
    });
</script>

jquery = easy javascript;）

Answer 6

或者你可以将整个输入元素传递给你创建的javascript函数然后操作它，注意整个元素如何通过“onClick =”fn（this）传递“这里这意味着元素本身。通过封闭在表单标签中的元素，我相信您可以通过名称调用元素，因为单个文档中允许使用重复的名称，然后可以在多个表单实例中进行隔离。

<html>
<head>
<script >
function fn(obj)
{    
if(obj.value=="name")
obj.value="";
}
</script>
</head>
<body>
<input name="input1" type="text" value="name" onClick="fn(this)"/>
</body></html>

访问和修改html正文的内容

6 个答案: