如何让HTML搜索框中的单词在专注于iOS时自行删除

How to have words within an HTML search box delete themselves upon focus on iOS

本文关键字：iOS 专注 删除 单词 HTML 搜索      更新时间：2023-09-26

我在谷歌上搜索了一下，但由于它的特殊性，搜索起来有点困难。

我有一个HTML搜索框在我的网站(用一个简单的HTML表单/表)。我想让"Search"这个词在文本框里面，使它看起来更好看(而不是把它放在搜索框的左边)。我还在页面加载时将焦点设置在搜索框上，因此一旦加载页面，光标就会被放置在该文本框内。

现在，这是在桌面操作系统上的行为，但在iOS上，页面不会加载内部的光标，因此文本不会自动选择。

我想知道的是如何让"搜索"文本在点击搜索框时自行删除。

再次，如果这是一个重复的帖子，我提前道歉，但我无法从搜索中找到任何内容。

我认为最简单的方法是使用CSS使文本变浅和灰色，并将其放置在文本框后面。然后你可以使用javascript来隐藏文本。

谢谢,马克斯

您应该在<body>标签中使用onload编写一个函数以在页面加载时调用，如下所示。

把它放在你的<head> 

<script>
  function focusOnTextBox(){
    //Get the textbox element
    var textBox = document.getElementById('moviesearchinput');
    //Focus on the textBox.
    textBox.focus();
    //Empty the value of the textbox.
    textBox.value = "";
  }
</script>

然后改变你的开始<body>标签看起来像这样

<body onload="focusOnTextBox();">

下面是一个JSFiddle来演示这个工作- http://jsfiddle.net/kp5br/

相关文章：