如何使用 JavaScript 将默认搜索文本添加到 HTML 中的搜索框？

在 HTML 页面中添加搜索框时，我们可以使用 input 标签并指定 type 为 "search" 来创建一个搜索框。

<input type="search" id="search-box" placeholder="Search">

接下来，我们可以使用 JavaScript 来将默认搜索文本添加到这个搜索框中。

1. 获取搜索框元素

要获取搜索框元素，我们可以使用 document.getElementById() 方法并传递搜索框的 id。

const searchBox = document.getElementById('search-box');

2. 设置默认搜索文本

要设置默认搜索文本，我们可以使用 setAttribute() 方法并设置 placeholder 属性的值。

searchBox.setAttribute('placeholder', 'Type your search here');

3. 添加事件监听器

如果用户在搜索框中输入文本后按下 Enter 键，则表示用户希望执行搜索操作。我们可以添加一个事件监听器来捕获这个事件并执行搜索操作。

searchBox.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    const searchText = searchBox.value;
    // 执行搜索操作
  }
});

在这个事件监听器中，我们首先检查用户是否按下了 Enter 键。如果是，则获取搜索框中的文本并传递给执行搜索操作的函数。我们可以在这个函数中执行搜索操作，例如向服务器发起请求并获取搜索结果。

完整代码

在这里是完整的 JavaScript 代码，它将默认搜索文本添加到搜索框中，并在用户按下 Enter 键时执行搜索操作：

const searchBox = document.getElementById('search-box');
searchBox.setAttribute('placeholder', 'Type your search here');

searchBox.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    const searchText = searchBox.value;
    // 执行搜索操作
  }
});

现在您已经知道如何使用 JavaScript 将默认搜索文本添加到 HTML 中的搜索框了！