单击按钮后如何使输入字段为空？答案

【问题标题】：How to make input field null after button is clicked?单击按钮后如何使输入字段为空？
【发布时间】：2020-03-02 05:39:19
【问题描述】：

我希望在按下搜索按钮后输入字段为空，以便可以看到占位符文本。我怎样才能做到这一点？

        let inp1 = document.querySelector('#inp1');

        let arrai = ["cake", "apple", "banan"];



          function engine(){
            for(let srch of arrai){
              if (inp1.value === srch) {
                window.location.href = inp1.value+".html"
              } else {
                inp1.focus();
                inp1.style.border = "2px solid red";
                inp1.placeholder = "failed";
              }
            }
          }

【问题讨论】：

你的代码有更大的问题......
请详细说明
如果你在 else 中设置了 inp1.value = '' ，它将永远找不到苹果或香蕉的匹配项
是的，现在看到了

标签： javascript input placeholder

【解决方案1】：

inp1.value ='';

这会将输入设置为空白并应显示占位符。如果这不起作用，请尝试

inp1.innerHTML = '';

一般 innreHTML 仅适用于 div、span 等。输入具有值。

【讨论】：

这将是价值，而不是 innerHTML
这最终会导致一个新问题。
@epascarello 什么样的问题？
啊那个。这不在他的问题中，所以我没有详细说明。我只是用正确的语法游戏他而已。

【解决方案2】：

您的问题的答案是您需要将值设置为空才能看到占位符。但是您的代码仅适用于数组中的第一个值，因为您假设匹配无效是错误的。事实并非如此，因为您还没有检查所有的可能性。

您需要做的是更改您的支票。最好使用包含而不是 for 循环。

function engine(){
  var value = inp1.value.toLowerCase()
  var hasMatch = arrai.includes(value)
  if (hasMatch) {
    window.location.href = value + ".html"        
   } else {
     inp1.value = ''; // what you originally asked for
     inp1.focus();
     inp1.style.border = "2px solid red";
     inp1.placeholder = "failed";
   }
 }

用for循环来做

function engine(){
  var hasMatch = false
  for(let srch of arrai){
    if (inp1.value === srch) {
      window.location.href = inp1.value + ".html"
      hasMatch = true
    }
  }
  if (!hasMatch) {
    inp1.value = '';
    inp1.focus();
    inp1.style.border = "2px solid red";
    inp1.placeholder = "failed";
  }
}

【讨论】：