避免在待办事项列表应用中输入空文本

时间:2019-02-01 17:52:13

标签: javascript html

如何检测用户输入的文本输入是否为空或包含某些文本?

我当前正在制作一个待办事项应用程序,我希望如果用户未在文本区域中键入任何内容并单击添加,则该应用程序不应接受任何输入并显示类似Enter Valid Items之类的消息

任何帮助将不胜感激:)

2 个答案:

答案 0 :(得分:0)

只需使用.length属性检查字符串长度。

类似:

if (your_var.length > 0) {
    // ok
    alert("Ok");
} else {
    alert("Enter Valid Items");
}

请参见https://www.w3schools.com/jsref/jsref_length_string.asp

答案 1 :(得分:0)

//querySelectorAll get all input element.

document.querySelectorAll('input').forEach(input=>{
  //Adding an event listener to all inputs which is be fired when the input 
  //field will be defocused
  input.addEventListener('blur',(e)=>{
    //check if the input which is defocused is empty.
    if(e.target.value === ''){
       //Set error as placeholder
       e.target.setAttribute('placeholder',"This field is required")
    }
    else console.log("Input field not empty")
  })
})
<input type="text">
<input type="text">
<input type="text">
<input type="text" placeholder="text">