Question

我想使用普通的javascript在表单输入字段中显示页面标题。

我试过这个，但它不起作用。我做错了什么？

<input type="text" value="javascript:document.title;"/>

另外，如何检查输入字段是否实际存在，如果是，则不执行任何操作。我想做这个检查以避免JS错误。

Answer 1

不，它不会。永远不会执行value。试试这个：

<title>title text here</title>

<!-- ... -->

<input type="text" id="titleinput">
<script>
  var theInput = document.getElementById('titleinput')
  if (theInput) {
    theInput.value = document.title;
  }
</script>

编辑：显示如何测试输入的存在，并删除了寻找标题的神秘方式，因为有更好的方法。虽然，在这种情况下，你可能知道你已经创建了输入字段，并认为它在那里（你的程序应该出错，如果它不是，就像你删除一行时应该出错从代码本身开始。我只会对HTML进行这样的检查。我可能只是个人选择，我知道我没有做足够的防御性编程。

EDIT2：jasonscript有一个观点，但我认为这会让OP更加困惑。如果你想要一个最佳实践答案，你可以做一些这样的事情，以避免全局变量：

(function(theInput) {
  if (theInput) {
    theInput.value = document.title;
  }
})(document.getElementById('titleinput'));

Answer 2

value属性是一个字符串，如果在其中放置一些JS，它就不会执行。

在DOM中输入准备就绪后，您可以使用JS设置其值：

<input type="text" value="">
<script>
    document.querySelector('input').value = document.title;
</script>

querySelector将为您提供DOM中的第一个input元素。

具体而言，您可以将任何css选择器传递给方法，例如以下代码中的ID选择器。请注意，不同的参数querySelector正在使用：

<input type="text" value="" id="titleInput">
<script>
    document.querySelector('#titleInput').value = document.title;
</script>

有关querySelector的更多信息，请访问selectors api spec。

Answer 3

这样可行：

<强> HTML ：

<title>awesome site</title>



<input type="text" id="textinput" value=""/>

<强> JAVASCRIPT ：

<script>
var title = document.title;
var textinput = document.getElementById('textinput');
if (textinput) {
textinput.value = title;
}
</script>

或更短：

<script>
document.getElementById('textinput').value = document.title;
</script>

如何在表单字段中显示页面标题？

3 个答案: