event.preventDefault()

event.preventDefault()

如果事件可取消,则取消该事件,而不停止事件的进一步传播。

  • 比如下面的实例,做一个校验,输入不满足的则不会写入。

<html>
<head>
<title>preventDefault exampletitle>
head>
<body>
<p>请输入一些字母,只允许小写字母.p>
<form>
    <input type="text" id="my-textbox"/>
form>
<script type="text/javascript">
function checkName(evt) {
    debugger;
    var spanEl = document.querySelector('form span');
    if(spanEl){
        spanEl.parentNode.removeChild(spanEl);
    }
    var charCode = evt.charCode;
      if (charCode != 0) {
        if (charCode < 97 || charCode > 122) {
            var form = document.querySelector('form');
            evt.preventDefault();//event.preventDefault()
            let warnEl = document.createElement('span');
            warnEl.innerText = "只能输入小写字母";
            warnEl.style.color = 'red';
            form.appendChild(warnEl);
        }
      }
}
document.getElementById('my-textbox').addEventListener(
    'keypress', checkName, false
 );
console.log(document.getElementById('my-textbox'));
script>
body>
html>

event.preventDefault()_第1张图片
不满足的取消事件,所以不满足条件的输入不会写入到input里面

你可能感兴趣的:(JavaScript)