Question

这是我的代码 - http://jsfiddle.net/EC6jT/

<input type="text" id="mytext">
<a href='javascript:elem();'>click</a><br/>  

<input type="text" id="mytext2">
<a href='javascript:document.getElementById("mytext2").value = "My default value";'>click</a><br/>

<script type="text/javascript">
function elem() {
  document.getElementById("mytext").value = "My default value";
};
</script>

为什么第一次＆＃34;点击＆＃34;链接正常工作，第二个链接不起作用？为什么第二个＆＃34;点击＆＃34;链接会删除所有内容吗？

感谢。

Answer 1

而不是这个

<a href='javascript:document.getElementById("mytext2").value = "My default value"; '>click</a><br/>

像这样使用

<a href='javascript:document.getElementById("mytext2").value = "My default value"; return false;'>click</a><br/>

来自@Jonathan Lonowski的

优秀解释

要解释return false或类似内容的需要，javascript:...会显示结果，如果它是真实的 - 例如href="javascript:"foo"。 elem()默认返回undefined，这是假的。但是，赋值运算符（=）返回分配的值。另一种选择是在语句前加上void运算符，以丢弃任何可能的结果 - href="javascript:void document....“。 -

Answer 2

您必须在代码末尾使用其中一个语句，以避免删除：

return false;
event.preventDefault(); //will prevent the default event from occuring
event.stopPropagation();

<a href='javascript:document.getElementById("mytext2").value = "My default value"; event.preventDefault()'>click</a><br/>

但我建议您在这种情况下使用 onlick 事件。

<a href='#' onclick='javascript:document.getElementById("mytext2").value = "My default value"'>click</a><br/>

Answer 3

<input type="text" id="mytext"> <a href='javascript:void(0);'   onclick="setDefaultValue('mytext')">click</a>
<br/>
<input type="text" id="mytext2"> <a href='javascript:void(0);' onclick="setDefaultValue('mytext2')">click</a>
<br/>
<script type="text/javascript">
    function setDefaultValue(id) {
        document.getElementById(id).value = "My default value";
    };
</script>

http://jsfiddle.net/55TDx/

为了更好的代码重用性和更干净，使用函数来处理这个，通过传入您想要具有默认值的输入的id。您甚至可以进一步自定义此功能以显示自定义默认值。因此，如果需要更改，您只需要更改一个地方而不是多个地方。

getElementById无法正常工作

3 个答案: