不允許複製和粘貼文本框中的小數和文本值

我不希望允許在文本框中輸入並複製和粘貼十進制值和字母。而且我可以輸入負值。但負面符號（「 - 」）應始終在開始。請看下面的小提琴。在這個小提琴中它不允許小數值和字母表。但是，如果我像這樣複製並粘貼「22.50」，它將採用十進制值。我如何限制這一點。不允許複製和粘貼文本框中的小數和文本值

我的要求，

1）只允許數字（正數和負數）。

2）「 - 」符號應該在開頭。不允許在中間或某處。

3）字母不應該允許甚至複製粘貼也。

4）我可以複製粘貼數字，如「2222」和「-2222」。但不是字符和小數。

FIDDLE

var input = document.getElementById("myInput"); 
 

 
input.onkeypress = function(e) { e = e || window.event; 
 
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode; 
 

 
    // Allow non-printable keys 
 
    if (!charCode || charCode == 8 /* Backspace */) { 
 
     return; 
 
    } 
 

 
    var typedChar = String.fromCharCode(charCode); 
 

 
    // Allow numeric characters 
 
    if (/\d/.test(typedChar)) { 
 
     return; 
 
    } 
 

 
    // Allow the minus sign (-) if the user enters it first 
 
    if (typedChar == "-" && this.value == "") { 
 
     return; 
 
    } 
 

 
    // In all other cases, suppress the event 
 
    return false; 
 
};

<input type="text" maxlength="10" id="myInput">

請幫我這樣做。

來源

2016-03-08 sathish kumar

怎麼樣？ –

您的輸入是表單的一部分嗎？你可以在提交表單時使用'pattern'驗證嗎？ – jritchey

在input.onkeypress函數內部添加一條警報聲明。然後你會看到這個函數是在過濾輸入。它可能不會被粘貼輸入執行。 – JohnH

您可以使用jQuery來監聽輸入字段更改爲

$('#myInput').bind('input', function(e) { 
    //handle the input text here 
});

如果你什麼都不想要顯示當字符串包含無效的文字，您可以設置輸入字段的值清空爲

$("#myInput").val("");

更新：

這裏是演示

$('#myInput').bind('input', function(e) { 
var str = $("#myInput").val(); 
var dec = str.indexOf("."); 
var first_char = str.charAt(0); 
var isNumber = true; 
var haveDecimal = false; 

if (first_char == '-' || !isNaN(first_char)) { 
    for (i=1; i<str.length; i++) { 
     if(isNaN(str.charAt(i)) && str.charAt(i) != '.') { 
      isNumber = false; 
      break; 
     } 
    } 
} 
else { 
    isNumber = false; 
} 

if(dec != -1 && isNumber) { 
    str = str.substring(0, str.indexOf(".")); 
} 

if (isNumber) { 
    $("#myInput").val(str); 
} 
else { 
    $("#myInput").val(""); 
} 
});

的jsfiddle：http://jsfiddle.net/7XLqQ/99/

來源

2016-03-08 16:20:30 Munawir

我認爲你誤解了這個問題。 –

@RinoRaj我認爲我是對的。檢查小提琴 – Munawir

謝謝。但是，如果我複製並粘貼十進制值，它將採用十進制值。我也想限制這一點。如果我粘貼「50.25」，它應該只需要「50」。喜歡這個我想要的。同樣也是否定的。如果我粘貼「-50.30」，它應該只帶「-50」。 –

您可以使用onpaste事件

input.onpaste = function...

爲了驗證，我認爲你最好使用正則表達式

http://www.w3schools.com/jsref/jsref_obj_regexp.asp

來源

2016-03-08 16:22:58 Khelmo

我的答案是不完全你問什麼，但我敢於直言不諱，並在這裏展示一些不必要的舉措。

將客戶端輸入鎖定爲表單是不可能的。任何輸入鎖定應該是服務器端的。

「無聲無息」的輸入可能會讓某些用戶感到惱火，而試圖跨瀏覽器實現它是痛苦的屁股。它們不是爲了給這個API提供便利和用戶友好的（考慮移動設備）而設計的。

因此，如果簡單的路線適合您 - 您可以使用HTML5屬性，並讓現代瀏覽器正確處理如何照顧輸入。如果您使用下面的代碼片段的原始版本（我的意思是將其複製到本地機器 - FIDDLE捕獲提交經驗的提交事件），但不允許用戶發送表單。它會允許輸入錯誤的符號，但會顯示錯誤。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>123</title> 
 
    </head> 
 
<body> 
 
    <form action="/" method="get"> 
 
    <input type="text" 
 
      pattern="-*[0-9]+" 
 
      required="required" 
 
      title="Input number (required)." 
 
    > 
 
    <br> 
 
    <input type="number" 
 
      required="required" 
 
      title="Input number here (required)." 
 
    > 
 
    <br> 
 
    <input type="submit" value="Send"> 
 
</form> 
 
</body> 
 
</html>

乾杯。如果你打算按照自己的方式 - 以自己的方式掌握用戶如何提出他的意見 - 我想說你正處於一個痛苦的世界。^_ ^祝你好運。

來源

2016-03-08 17:02:08

這裏是另一種回答你的問題的方法。你可以試試這個插件 - 如果它適合你的目標瀏覽器 - 那麼給你更多的權力。

http://digitalbush.com/projects/masked-input-plugin/

來源

2016-03-08 17:18:39

如果你打開使用jQuery，您可以使用jQuery的.change()事件處理程序。事件處理程序將在輸入值改變並且輸入失去焦點時被調用。請參閱我在jsfiddle中使用的以下代碼。

$('#myInput').change(function() { 
    var str = $('#myInput').val(); 
    var pattern = /^(-?)\d+$/; 
    var result = pattern.test(str); 
    if (result === true) { 
    // Do something... 
    } else { 
    // Do something else... 
    } 
})

另外，如果您輸入的表單中，你是開放的表單提交驗證（而不是實時輸入驗證），而你正在編寫HTML5兼容的瀏覽器，可以繞過JavaScript和使用用於輸入驗證的HTML5的pattern屬性。請參閱我在jsfiddle中使用的以下代碼。

<input type="text" maxlength="10" id="myInput" pattern="-?[0-9]+" title="Integers only." required/>

來源

2016-03-08 17:57:01 jritchey

作爲替代方案，如果您使用的輸入表單提交，否則不需要編程訪問的輸入值，你可以讓你的瀏覽器處理驗證（你甚至可以增加視覺指示器與CSS）：

input:invalid { 
 
    color: #ff0000; 
 
    border-color: #ff0000; 
 
}

<form action="#"> 
 
    <input type="number" step="1" value="0"> 
 
    <input type="submit"> 
 
</form>

上述input的step屬性將不允許任何小數存在。任何可敬的AJAX表單提交庫或插件也將考慮到此驗證。

否則，你正在尋找各種跨瀏覽器實現的變化和事件處理的一個殘酷而漫長的打磨，在每個處理 - 在輸入值如有變更 - 檢查新值是否是一個相匹配正則表達式如下：

-?[0-9]+

來源

2016-03-08 18:18:29

不允許複製和粘貼文本框中的小數和文本值

回答

相關問題