隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)頁(yè)逐漸演變成為一個(gè)信息與用戶交互的平臺(tái)。對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)，如何打造一個(gè)流暢舒適的交互體驗(yàn)，就成了一個(gè)十分重要的問(wèn)題。而對(duì)于用戶而言，更流暢舒適自然的交互體驗(yàn)便意味著更高效便捷地完成自己需求。在Web應(yīng)用程序中，用戶與應(yīng)用程序的交互通常是通過(guò)輸入框和表單元素來(lái)實(shí)現(xiàn)的。而JavaScript輸入事件，就是用來(lái)幫助開(kāi)發(fā)人員更好地管理用戶在輸入時(shí)展現(xiàn)行為的技術(shù)。
JS輸入事件有很多種，其中最常見(jiàn)的就是元素了。那么我們?cè)撊绾伪O(jiān)聽(tīng)并利用這個(gè)事件呢？先來(lái)看一個(gè)例子：
<html>
<head>
<title>input事件示例</title>
</head>
<body>
<input type="text" id="input" />
<p id="text"></p>
<script>
var input = document.getElementById('input');
var text = document.getElementById('text');
input.addEventListener('input', function(){
text.innerHTML = input.value;
});
</script>
</body>
</html>上述代碼演示了一個(gè)基本的輸入匹配功能。當(dāng)你在input框中輸入、刪除或復(fù)制文字時(shí)，頁(yè)面上的文本也隨之改變。這個(gè)例子演示了在文本框中使用'oninput'事件簽名，然后在觸發(fā)時(shí)將輸入框的值顯示在ID為“text”的<p>元素中。這個(gè)簡(jiǎn)單的例子向我們展示了使用input事件處理器的許多可能性。這里讓我們?cè)敿?xì)了解一下。
第一種常見(jiàn)的輸入事件是"onfocus"。當(dāng)用戶點(diǎn)擊輸入框并將其聚焦時(shí)，此事件便會(huì)觸發(fā)。我們可以在此時(shí)立即在輸入框中定位光標(biāo)并彈出一些信息以吸引用戶的注意力。例如：當(dāng)用戶點(diǎn)擊“搜索”的文本框時(shí)，我們可能希望頁(yè)面顯示一些預(yù)定義的搜索建議，以告訴他們使用框架的所有方法。以下是這個(gè)示例的代碼：
<input type="text" id="search" placeholder="Search">
<script>
var search = document.getElementById('search');
search.addEventListener('focus', function(){
// 選擇所有搜索提示文字，將其刪除
search.select();
search.style.backgroundColor = '#EEE';
});
</script>在這個(gè)例子中，我們?yōu)槲谋究蛱砑恿艘粋€(gè)占位符來(lái)顯示“搜索”，然后在“focus”事件發(fā)生時(shí)使用了select()方法將光標(biāo)定位在文本框中。此外，我們還將文本框的背景顏色設(shè)置為灰色，以吸引用戶的注意力。當(dāng)然，您可以隨意更改輸入框的顏色，樣式或任何其他屬性，以獲得您想要的外觀。
第二種常見(jiàn)的輸入事件是"onblur"。當(dāng)用戶點(diǎn)擊區(qū)域之外的地方時(shí)，輸入框會(huì)失去焦點(diǎn)，并觸發(fā)blur事件。這個(gè)事件可以幫助我們檢查用戶是否已輸入正確的值。如果它沒(méi)有通過(guò)一些驗(yàn)證器，則可以向用戶顯示一個(gè)錯(cuò)誤消息。下面是一個(gè)基本的實(shí)現(xiàn)：
<input type="email" id="email">
<span id="error"></span>
<script>
var email = document.getElementById('email');
var error = document.getElementById('error');
email.addEventListener('blur', function(){
if (!email.validity.valid){
error.innerHTML = '請(qǐng)輸入正確的電子郵件地址';
} else{
error.innerHTML = '';
}
});
</script>在這個(gè)示例中，我們添加了一個(gè)Email輸入框，以便用戶可以填寫(xiě)他們的聯(lián)系電子郵件。我們使用了"validity.valid"屬性來(lái)檢查是否已輸入有效電子郵件地址。如果輸入無(wú)效，我們將在“span”元素中顯示一條消息告訴用戶輸入有誤。對(duì)于form里的其他表單控件，還有各種驗(yàn)證attribute可供利用，讓我們?cè)隍?yàn)證數(shù)據(jù)時(shí)變得更方便
第三種常見(jiàn)的輸入事件是“oncopy”、“oncut”和“onpaste”事件。這些事件分別在用戶復(fù)制、剪切或粘貼文本時(shí)觸發(fā)。在某些情況下，我們可能需要在此時(shí)阻止默認(rèn)行為。例如，如果我們正在編寫(xiě)一個(gè)富文本編輯器，則需要防止文本被更改。以下是一個(gè)簡(jiǎn)單的防止輸入的實(shí)現(xiàn)：
<input type="text" id="input">
<span id="error"></span>
<script>
var input = document.getElementById('input');
input.addEventListener('copy', function(e){
e.preventDefault();
error.innerHTML = '不允許復(fù)制文字';
});
input.addEventListener('paste', function(e){
e.preventDefault();
error.innerHTML = '不允許粘貼文字';
});
input.addEventListener('cut', function(e){
e.preventDefault();
error.innerHTML = '不允許剪切文字';
});
</script>在這個(gè)例子中，當(dāng)用戶在觸發(fā)copy、cut或paste時(shí)，輸入框?qū)⒉粫?huì)響應(yīng)任何用戶活動(dòng)，并顯示一條消息反饋給用戶。 preventDefault() 方法會(huì)阻止默認(rèn)行為，防止用戶執(zhí)行不必要的操作。此方法與其他許多JavaScript函數(shù)一樣，可以幫助您靈活控制各種用戶行為。
除了上述所介紹的事件， input事件還有很多其他實(shí)現(xiàn)方式。通過(guò)監(jiān)聽(tīng)這些事件，您可以以各種方式增強(qiáng)您的Web應(yīng)用程序的交互體驗(yàn)。相信經(jīng)過(guò)今天的多番學(xué)習(xí)，聰明的您已經(jīng)掌握了這些技術(shù)。祝您使用愉快！