请问用HBuilder X,怎么实现文本框的placeholder值隔2秒自动切换

Question

怎么实现文本框的placeholder属性值隔2秒自动切换，如果搜索是一个图片，当输入文字的时候，怎么把图片隐藏

Answer 1

可以使用JavaScript和定时器函数来实现文本框的placeholder属性值隔2秒自动切换。对于搜索是一个图片的情况，您可以使用JavaScript和事件处理函数来实现在用户输入文字时隐藏图片。

<!-- 输入框和搜索图片 -->
<input type="text" id="myInput" placeholder="Text 1">
<img src="search.png" id="searchImg">

<!-- JavaScript代码 -->
<script>
// 定义要循环显示的placeholder值
var placeholders = ["Text 1", "Text 2", "Text 3"];

// 定义当前显示的placeholder索引
var currentPlaceholder = 0;

// 定义定时器函数，每2秒钟更新一次placeholder值
setInterval(function() {
  // 获取输入框元素
  var inputElement = document.getElementById("myInput");
  
  // 更新placeholder值
  inputElement.placeholder = placeholders[currentPlaceholder];
  
  // 增加当前索引，确保循环
  currentPlaceholder = (currentPlaceholder + 1) % placeholders.length;
}, 2000);

// 添加事件处理函数，当用户输入文字时隐藏图片
var inputElement = document.getElementById("myInput");
inputElement.addEventListener("input", function() {
  // 获取搜索图片元素
  var imgElement = document.getElementById("searchImg");
  
  // 检查输入框是否有值，如果有则隐藏图片，否则显示图片
  if (inputElement.value !== "") {
    imgElement.style.display = "none";
  } else {
    imgElement.style.display = "block";
  }
});
</script>

首先定义了要循环显示的placeholder值和当前显示的placeholder索引。然后，我们使用setInterval()函数来定义一个定时器，该定时器每2秒钟更新一次placeholder值。在定时器函数中，我们获取输入框元素，更新placeholder值，并增加当前索引以确保循环显示所有placeholder值。

接下来，我们使用addEventListener()函数向输入框元素添加一个事件处理函数，该处理函数在用户输入文字时执行。在处理函数中，我们获取搜索图片元素，并检查输入框是否有值。如果输入框有值，则隐藏搜索图片，否则显示搜索图片。

您可以将上述代码添加到您的HTML文件中，并将其与文本框和搜索图片元素关联起来。这样，每当用户在文本框中输入内容时，搜索图片就会被隐藏，而placeholder值会隔2秒钟自动更改。