欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript鍵盤事件超詳細(xì)總結(jié)

 更新時(shí)間：2023年10月13日 15:56:19   作者：啊啊啊啊啊威  
這篇文章主要給大家介紹了關(guān)于JavaScript鍵盤事件的相關(guān)資料,鍵盤事件是指在網(wǎng)頁(yè)中當(dāng)用戶按下鍵盤上的按鍵時(shí)所觸發(fā)的事件,在JavaScript中可以通過(guò)監(jiān)聽(tīng)鍵盤事件來(lái)實(shí)現(xiàn)一些交互效果,需要的朋友可以參考下

本文章簡(jiǎn)單介紹一下，JavaScript里面的鍵盤事件。

一、keydown：按下鍵盤上的任意鍵時(shí)觸發(fā)。

keydown事件在JavaScript中用于響應(yīng)鍵盤按下鍵的操作。它常用于實(shí)現(xiàn)以下場(chǎng)景：

1.捕獲用戶的按鍵操作：可以通過(guò)監(jiān)聽(tīng)keydown事件來(lái)捕獲用戶按下的鍵，并執(zhí)行相應(yīng)的操作。例如，可以通過(guò)監(jiān)聽(tīng)keydown事件來(lái)檢測(cè)用戶按下了特定的快捷鍵，然后執(zhí)行相應(yīng)的功能。

2.表單輸入控制：可以利用keydown事件對(duì)用戶的輸入進(jìn)行控制。例如，可以監(jiān)聽(tīng)keydown事件，判斷用戶按下的鍵是否是數(shù)字鍵或字母鍵，以限制輸入內(nèi)容只能是數(shù)字或字母。

Keydown事件實(shí)例：

<script type="text/javascript">
	document.addEventListener("keydown", function(event) {
		// 判斷按下的鍵是否是回車鍵（鍵碼為13）
		if(event.keyCode === 13) {
			// 執(zhí)行相應(yīng)的操作，例如提交表單或執(zhí)行搜索功能
			console.log("Enter key pressed!");
			// 在這里可以添加具體的邏輯代碼
		}
	});
</script>

二、keyup：釋放鍵盤上的任意鍵時(shí)觸發(fā)。

keyup事件在JavaScript中用于響應(yīng)鍵盤釋放鍵的操作。它常用于實(shí)現(xiàn)以下場(chǎng)景：

1．捕獲用戶的鍵盤釋放操作：可以通過(guò)監(jiān)聽(tīng)keyup事件來(lái)捕獲用戶釋放的鍵，并執(zhí)行相應(yīng)的操作。例如，在游戲開(kāi)發(fā)中，可以利用keyup事件來(lái)檢測(cè)玩家釋放了特定的按鍵，然后更新游戲狀態(tài)或執(zhí)行相應(yīng)的動(dòng)作。

2.表單輸入控制：可以利用keyup事件對(duì)用戶的輸入進(jìn)行實(shí)時(shí)控制和驗(yàn)證。例如，可以監(jiān)聽(tīng)keyup事件，檢測(cè)用戶在輸入框中釋放鍵后的輸入內(nèi)容，并進(jìn)行輸入合法性檢查或?qū)崟r(shí)搜索等操作。

<script type="text/javascript">
	// 監(jiān)聽(tīng)鍵盤的keyup事件
	document.addEventListener("keyup", function(event) {
		// 判斷釋放的鍵是否是回車鍵（鍵碼為13）
		if(event.keyCode === 13) {
			// 執(zhí)行相應(yīng)的操作，例如提交表單或執(zhí)行搜索功能
			console.log("Enter key released!");
			// 在這里可以添加具體的邏輯代碼
		}
	});
</script>

三、keypress：在按下并釋放能夠產(chǎn)生字符的鍵時(shí)觸發(fā)（不包括功能鍵等）。

keypress事件在JavaScript中用于響應(yīng)鍵盤按鍵的操作，并在按下鍵時(shí)觸發(fā)。它常用于實(shí)現(xiàn)以下場(chǎng)景：

1.監(jiān)聽(tīng)用戶的實(shí)時(shí)輸入：可以通過(guò)監(jiān)聽(tīng)keypress事件來(lái)獲取用戶實(shí)時(shí)輸入的內(nèi)容，并進(jìn)行處理。例如，在一個(gè)即時(shí)聊天應(yīng)用中，可以利用keypress事件實(shí)時(shí)獲取用戶的輸入內(nèi)容，并將其顯示在聊天窗口中。

2.實(shí)現(xiàn)快捷鍵操作：可以利用keypress事件捕獲用戶按下特定的快捷鍵，執(zhí)行相應(yīng)的操作。例如，在一個(gè)文本編輯器中，可以使用keypress事件監(jiān)聽(tīng)用戶按下Ctrl+S組合鍵，實(shí)現(xiàn)快速保存文檔的功能。

需要注意的是，keypress事件在一些特定的情況下可能無(wú)法捕獲到所有的按鍵，例如功能鍵和組合鍵。在這些情況下，您可能需要結(jié)合其他事件（如keydown或keyup）來(lái)實(shí)現(xiàn)完整的鍵盤操作。

<script type="text/javascript">
	// 監(jiān)聽(tīng)鍵盤的keypress事件
	document.addEventListener("keypress", function(event) {
		// 獲取按下的鍵對(duì)應(yīng)的字符
		var char = String.fromCharCode(event.which);
		// 顯示用戶的輸入內(nèi)容
		var userInput = document.getElementById("user-input");
		userInput.textContent += char;
	});
</script>

最后，當(dāng)執(zhí)行一次點(diǎn)擊鍵盤按鈕的行為時(shí)，以上三個(gè)事件的觸發(fā)順序?yàn)椋?/strong>

keydown -> keypress -> keyup

四、input：在文本輸入框或可編輯元素的內(nèi)容發(fā)生改變時(shí)觸發(fā)（包括鍵盤輸入、粘貼、剪切等）。

input事件在JavaScript中用于監(jiān)聽(tīng)輸入框（input）或文本區(qū)域（textarea）內(nèi)容的實(shí)時(shí)變化。它常用于實(shí)現(xiàn)以下場(chǎng)景：

1．實(shí)時(shí)搜索提示：可以通過(guò)監(jiān)聽(tīng)input事件來(lái)實(shí)現(xiàn)實(shí)時(shí)搜索提示功能。當(dāng)用戶在搜索框中輸入內(nèi)容時(shí)，每次輸入都會(huì)觸發(fā)input事件，并可以通過(guò)獲取輸入框的值進(jìn)行搜索操作，并實(shí)時(shí)顯示搜索結(jié)果。

2.表單驗(yàn)證：可以利用input事件來(lái)監(jiān)聽(tīng)用戶在表單輸入框中輸入內(nèi)容的變化，并實(shí)時(shí)進(jìn)行表單驗(yàn)證。例如，可以監(jiān)聽(tīng)input事件檢查密碼強(qiáng)度，當(dāng)用戶輸入密碼時(shí)，實(shí)時(shí)顯示密碼強(qiáng)度的提示。

以下例子實(shí)現(xiàn)了當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，實(shí)時(shí)統(tǒng)計(jì)輸入字符的數(shù)量，并顯示在頁(yè)面上。

<body>
	<input type="text" id="input-field">
	<div id="char-count"></div>
</body>
<script>
	var inputField = document.getElementById("input-field");
	var charCount = document.getElementById("char-count");
	inputField.addEventListener("input", function(event) {
		var inputValue = event.target.value;
		var count = inputValue.length;
		charCount.textContent = "字符數(shù)量：" + count;
	});
</script>

五、compositionstart：在開(kāi)始進(jìn)行中文輸入時(shí)觸發(fā)。

compositionstart事件在用戶開(kāi)始輸入非直接字符（如中文輸入法輸入）時(shí)觸發(fā)。它通常用于捕獲輸入法開(kāi)始輸入字符的時(shí)機(jī)，以便進(jìn)行相關(guān)處理。

需要注意的是，中文輸入監(jiān)聽(tīng)事件的監(jiān)聽(tīng)目前似乎僅適配微軟自帶的微軟拼音輸入法，像搜狗一類的第三方輸入法并不能觸發(fā)該事件.

下面是一個(gè)例子，當(dāng)用戶使用中文輸入法輸入時(shí)，監(jiān)聽(tīng)compositionstart事件并在控制臺(tái)打印提示信息：

<body>
	<input type="text" id="input-field">
</body>
<script>
	var inputField = document.getElementById("input-field");
	inputField.addEventListener("compositionstart", function(event) {
		console.log("輸入法開(kāi)始輸入字符");
	});
</script>

六、compositionupdate：在進(jìn)行中文輸入時(shí)，每輸入一個(gè)字符時(shí)觸發(fā)。

compositionupdate事件在用戶正在輸入非直接字符（如中文輸入法輸入）時(shí)觸發(fā)。它通常用于捕獲正在輸入的字符以及相關(guān)信息的更新。

下面是一個(gè)例子，當(dāng)用戶使用中文輸入法輸入時(shí)，監(jiān)聽(tīng)compositionupdate事件并在控制臺(tái)打印輸入的字符：

<body>
	<input type="text" id="input-field">
</body>
<script>
	var inputField = document.getElementById("input-field");
	inputField.addEventListener("compositionupdate", function(event) {
		var inputText = event.data;
		console.log("正在輸入字符: " + inputText);
	});
</script>

實(shí)際效果：

七、compositionend：在結(jié)束中文輸入時(shí)觸發(fā)。

compositionend事件在用戶完成非直接字符（如中文輸入法輸入）的輸入時(shí)觸發(fā)。它通常用于捕獲輸入完成后的字符以及相關(guān)信息。

下面是一個(gè)例子，當(dāng)用戶使用中文輸入法輸入完成后，監(jiān)聽(tīng)compositionend事件并在控制臺(tái)打印輸入的字符：

<body>
	<input type="text" id="input-field">
</body>
<script>
	var inputField = document.getElementById("input-field");
	inputField.addEventListener("compositionend", function(event) {
		var inputText = event.data;
		console.log("輸入完成的字符: " + inputText);
	});
</script>

 實(shí)際效果：

附：案例（文本框提示信息）

當(dāng)用戶在文本框中輸入內(nèi)容時(shí)，文本框上面自動(dòng)顯示大號(hào)字的內(nèi)容。如果用戶輸入為空，需要隱藏大號(hào)字內(nèi)容

<style>
    .search{
        position: relative;
        width: 300px;
        margin: 100px auto;
    }
    .con{
        display: none;
        position: absolute;
        top: -40px;
        left: 50px;
        width: 171px;
        border: 1px solid rgba(0, 0, 0, .2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        padding: 5px 0;
        font-size: 18px;
        line-height: 20px;
        color: #333;
    }
    .con::before{
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 28px;
        left: 18px;
        border: 8px solid #000;
        border-style: solid solid solid;
        border-color: #fff transparent transparent;
    }
</style>
<body>
    <div class="search">
        <div class="con"></div>
        <label>
            快遞單號(hào)：
            <input type="text" placeholder="請(qǐng)輸入快遞單號(hào)" class="num">
        </label>
    </div>
    <script>
        var con = document.querySelector('.con');
        var numInput = document.querySelector('.num');
        //2、給文本框input注冊(cè)keyup事件
        numInput.addEventListener('keyup',function(e){
            if(this.value===''){//若用戶沒(méi)有輸入，con隱藏
                con.style.display = 'none';
            }else{
                con.style.display = 'block';
                con.innerText = this.value
            }
        })
        //3、給input注冊(cè)焦點(diǎn)事件
        numInput.addEventListener('blur',function(){
            con.style.display = 'none';
        })//數(shù)去焦點(diǎn)，con隱藏
        numInput.addEventListener('focus',function(){
            if(this.value !== ''){
                con.style.display = 'block';
            }
        })
    </script>
</body>

總結(jié)

到此這篇關(guān)于JavaScript鍵盤事件的文章就介紹到這了,更多相關(guān)JS鍵盤事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論