如何在表单域中显示页面标题

How to display page title in form field?

本文关键字：显示 标题 表单      更新时间：2023-09-26

我想使用纯JavaScript在表单输入字段中显示页面标题。

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

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

另外，我如何检查输入字段是否确实存在，如果是这样，则什么也不做。我想做这个检查以避免JS错误。

不，它不会。 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 进行这样的检查。这可能是个人选择，我知道我没有做足够的防御性编程。

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

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

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的更多信息，请访问选择器 api 规范。

这将起作用：

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>
相关文章：