刪除鍵將焦點移動到以前的輸入字段

我有一個電話號碼輸入和10個輸入字段，當你填寫每個號碼時，它跳到下一個。刪除鍵將焦點移動到以前的輸入字段

我希望它能夠返回到前一個字段，當我點擊刪除鍵（例如我輸入了一個不正確的數字在我的電話號碼）。我怎樣才能做到這一點？

看看我CodePen吧： http://codepen.io/Steve-Jones/pen/qdMjWb/

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
<body> 
    <div class="phone-field"> 
    (<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5" autofocus="autofocus"> 
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> 
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">) 
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> 
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> 
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> - 
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> 
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> 
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> 
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> 
</body>

CSS

.phone-field { 
    margin: 50px; 
    font-size: 20px; 
} 

.phone-input { 
    width: 13px; 
    text-align: center; 
    font-size: 16px !important; 
    height: 1.75em; 
    border: 0; 
    outline: 0; 
    background: transparent; 
    border-bottom: 2px solid #ddd; 
    margin-right: 2px; 
    margin-left: 2px; 
} 

[placeholder]:focus::-webkit-input-placeholder { 
    transition: opacity 0.5s 0.0s ease; 
    opacity: 0; 
}

jQuery的

$(document).ready(function(){ 
    $('body').on('keyup', 'input.phone-input', function(){ 
     if($(this).val().length === this.size){ 
     var inputs = $('input.phone-input'); 
     inputs.eq(inputs.index(this) + 1).focus(); 
     } 
    }); 
    });

來源

2015-07-21 Steve Jones

代碼請！或給你的codepen – divy3993

@ divy3993更新完美的鏈接！ –

好的，@Steve Jones看看我的答案能幫助你。 – divy3993

這是可以通過密鑰代碼： CodePen

$(document).ready(function(){ 

    $('body').on('keyup', 'input.phone-input', function() 
    { 
     var key = event.keyCode || event.charCode; 
     var inputs = $('input.phone-input'); 
     if(($(this).val().length === this.size) && key != 32) 
     { 
     inputs.eq(inputs.index(this) + 1).focus(); 
     } 
     if(key == 8 || key == 46) 
     { 
     var indexNum = inputs.index(this); 
     if(indexNum != 0) 
     { 
     inputs.eq(inputs.index(this) - 1).val('').focus(); 
     } 
     } 

    }); 
    });

你的代碼的樣子，我發現了一兩件事，在空格鍵，光標移到下一個索引。所以也爲了說明這一點，我認爲這是合適的。

鍵碼

退格= 8

刪除= 46

空格鍵= 32

來源

2015-07-21 18:08:41 divy3993

你可以使它完全的JavaScript，我的意思是不使用jQuery？有必要！ –

http://codepen.io/anon/pen/XbPgjJ

剛纔看的退格鍵和向後移動，而不是向前。

if(e.keyCode == 8){ 
    var index = inputs.index(this); 
    if (index != 0) 
     inputs.eq(index - 1).val('').focus();  
    }

來源

2015-07-21 17:39:23 DasBeasto

只要檢查關鍵事件是刪除，然後在元素前聚焦。我更新你的js文件如下，它運作良好。

$(document).ready(function(){ 
    $('body').on('keyup', 'input.phone-input', function(e){ 
     if($(this).val().length === this.size){ 
     var inputs = $('input.phone-input'); 
     inputs.eq(inputs.index(this) + 1).focus(); 
     } 
     if(e.keyCode == 8 || e.keyCode == 46){ 
     var inputs = $('input.phone-input'); 
     inputs.eq(inputs.index(this) - 1).focus(); 
     } 
    }); 
    });

來源

2015-07-21 17:53:58

刪除鍵將焦點移動到以前的輸入字段

回答

相關問題