javascript - Javascript - @keydown和@input一起触发

78 5

这是我的代码,


<div class="code">


 <input autofocus type="text" maxlength="1" class="passcode__box" @input="handleInput" @keydown="handleKeyDown"/>


 <input type="text" class="passcode__box" maxlength="1" @input="handleInput" @keydown="handleKeyDown"/>


 <input type="text" class="passcode__box" maxlength="1" @keyup="handleInput" @keydown="handleKeyDown"/>


 <input type="text" class="passcode__box" maxlength="1" @keyup="handleInput" @keydown="handleKeyDown"/>


 <input type="text" class="passcode__box" maxlength="1" @keyup="handleInput" @keydown="handleKeyDown"/>


 <input type="text" class="passcode__box" maxlength="1" @keyup="handleInput" @keydown="handleKeyDown"/>


 <input type="text" class="passcode__box" maxlength="1" @keyup="handleInput" @keydown="handleKeyDown"/>


 <input type="text" class="passcode__box" maxlength="1" @keyup="handleInput" @keydown="handleKeyDown"/>


 </div>



第2种方法


handleInput(event) {


 const value = event.target.value;


 const nextElement = event.target.nextElementSibling;


 if (value ==="" || !nextElement) {


 return;


 }


 nextElement.focus();



 },



 handleKeyDown(event) {


 console.log('handleKeyDown');


 //Right arrow key


 if(event.keyCode == 39) {


 event.target.nextElementSibling.focus();


 }



 //Left arrow key


 if(event.keyCode == 37) {


 event.target.previousElementSibling.focus();


 }



 //Backspace key - cmd


 if(event.keyCode == 8) { //backspace


 if(event.target.value === '') {


 event.target.previousElementSibling.focus();


 return;


 }


 event.target.value = '';


 }


 }



时间: 原作者:

73 2

一个可以工作的例子在CodeSandbox上。

希望这对您有所帮助!


<template>


 <div class="passcode">


 <template v-for="index in inputs">


 <input


 type="text"


 class="passcode__box"


 :key="index"


 :maxlength="maxlength"


 @keydown="onKeydown"


 @input="onInput"


 >


 </template>


 </div>


</template>




<script>


export const KeyCodes = {


 RIGHT_ARROW: 39,


 LEFT_ARROW: 37,


 BACKSPACE: 8


};



export default {


 name:"Passcode",



 props: {


 inputs: {


 type: Number,


 default: 4


 },


 maxlength: {


 type: Number,


 default: 1


 }


 },



 methods: {


 /**


 * Moves focus between siblings and handles `Backspace`.


 *


 * @param {KeyboardEvent} event


 */


 onKeydown(event) {


 const target = event.target;


 const next = target.nextElementSibling;


 const prev = target.previousElementSibling;



 switch (event.keyCode) {


 case KeyCodes.RIGHT_ARROW:


 next && next.focus();


 break;



 case KeyCodes.LEFT_ARROW:


 prev && prev.focus();


 break;



 case KeyCodes.BACKSPACE:


 if (target.value.length) {


 target.value ="";


 return;


 }



 setTimeout(() => prev && prev.focus());


 break;



 default:


 break;


 }


 },



 /**


 * Handles printable characters and moves focus


 * to the next <input> sibling if it's present.


 *


 * @param {KeyboardEvent} event


 */


 onInput(event) {


 const value = event.target.value;


 const next = event.target.nextElementSibling;



 if (!value.length || !next) {


 return;


 }



 next.focus();


 }


 }


};


</script>



原作者:
...