2015-10-21 83 views
4


我試圖讓用戶只輸入數字並將控件複製並粘貼到文本框。我能夠限制用戶只輸入數字,但複製,粘貼不工作,我幫我解決這個問題。

這裏是我的腳本:
只允許數字和ctrl + a,ctrl + v,ctrl + c到文本框

$(".allow_only_numbers").keydown(function (e) { 
    var ctrlDown = false; 
    var ctrlKey = 17, vKey = 86, cKey = 67; 
    if (e.keyCode === ctrlKey){ 
     ctrlDown = true; 
    } 
    // Allow: backspace, delete, tab, escape, enter and . 
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 || 
      // Allow: Ctrl 
     (e.keyCode === ctrlKey) || 
      // Allow: Ctrl+A 
     (e.keyCode === 65 && e.ctrlKey === true) || 
      // Allow: Ctrl+v 
     (e.keyCode === vKey && ctrlDown) || 
      // Allow: Ctrl+c 
     (e.keyCode === cKey && ctrlDown) || 
      // Allow: home, end, left, right, down, up 
     (e.keyCode >= 35 && e.keyCode <= 40)) { 
     // let it happen, don't do anything 
     return; 
    } 
    // Ensure that it is a number and stop the keypress 
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { 
     e.preventDefault(); 
    } 
}); 

這裏是的jsfiddle鏈接:

https://jsfiddle.net/sureshpattu/stwzhceL/1/

+0

你能不能只設置類型爲數字? ''? – guradio

+0

@Pekka我可以限制用戶只輸入數字,但複製,粘貼不適合我。現代瀏覽器的 –

+0

可以使用'input'事件進行粘貼和按鍵事件。 IE9有部分支持,IE8沒有 – charlietfl

回答

13

嘗試用event.keyCodeevent.metaKey這樣。

$(document).ready(function() { 
 
    $(".allow_only_numbers").keydown(function(e) { 
 
    // Allow: backspace, delete, tab, escape, enter and . 
 
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || 
 
     // Allow: Ctrl+A,Ctrl+C,Ctrl+V, Command+A 
 
     ((e.keyCode == 65 || e.keyCode == 86 || e.keyCode == 67) && (e.ctrlKey === true || e.metaKey === true)) || 
 
     // Allow: home, end, left, right, down, up 
 
     (e.keyCode >= 35 && e.keyCode <= 40)) { 
 
     // let it happen, don't do anything 
 
     return; 
 
    } 
 
    // Ensure that it is a number and stop the keypress 
 
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { 
 
     e.preventDefault(); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<input type="number" class="allow_only_numbers" />

編輯:

從您的代碼刪除下面的代碼片段。

var ctrlDown = false; 
var ctrlKey = 17, vKey = 86, cKey = 67; 
if (e.keyCode === ctrlKey) { 
    ctrlDown = true; 
} 

因爲ctrlDownfalse同時按下CV用於複製和粘貼。因此,您的ctr+cctrl+v不起作用。

0

如果您改變​​事件到keyup事件,您可以使用e.ctrlKey,這將是true當按下ctrl鍵時。

0
function numbersonly(evt) { 
    evt = (evt) ? evt : window.event; 
    var charCode = (evt.which) ? evt.which : evt.keyCode; 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
     return false; 
    } 
    return true; 
} 
1
$(".allow_only_numbers").keydown(function (e) { 
     var isModifierkeyPressed = (e.metaKey || e.ctrlKey || e.shiftKey); 
     var isCursorMoveOrDeleteAction = ([46,8,37,38,39,40].indexOf(e.keyCode) != -1); 
     var isNumKeyPressed = (e.keyCode >= 48 && e.keyCode <= 58) || (e.keyCode >=96 && e.keyCode <= 105); 
     var vKey = 86, cKey = 67,aKey = 65; 
     switch(true){ 
      case isCursorMoveOrDeleteAction: 
      case isModifierkeyPressed == false && isNumKeyPressed: 
      case (e.metaKey || e.ctrlKey) && ([vKey,cKey,aKey].indexOf(e.keyCode) != -1): 
       break; 
      default: 
       e.preventDefault(); 
     } 
}); 

這裏工作示例

https://jsfiddle.net/stwzhceL/8/

這讓你ctrl+actrl+cctrl+v以及方向鍵,刪除鍵,退格鍵。

加上這段代碼覆蓋MAC爲好。(這是cmd+a/cmd+c/cmd+v

+0

好的解決方案,比約翰R.的答案更清晰,即使它本質上是相同的東西 – rkd

0

這應該給你一個想法。對不起,我在Mac上,據我所知e.ctrlKey等不適用於Mac。

var mod; 
 

 
var ouput = jQuery('#output'); 
 

 

 
var numeric = jQuery('#numeric').keydown(function(e){ 
 
    mod = e.which; 
 
    
 
    if(!(e.which >= 48 && e.which <= 57) && (e.which != 8) 
 
    && (mod && (e.which == 67 || e.which != 86))){ 
 
     e.preventDefault(); 
 
    } 
 
    
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' id='numeric'/> 
 

 
<label id='output'></label>

1

$(".allow_only_numbers").on("input",function (e) { 
 
    e.target.value = e.target.value.replace(/[^0-9]/g,'') 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="allow_only_numbers" />

相關問題