2016-08-25 80 views
1

我有這個HTML和jQuery代碼,提醒用戶只有數字輸入。 我想在用戶輸入點''時提醒用戶。在文本字段中。如何在用戶輸入時提醒用戶輸入類型文本檢測到點?

<html> 
<body> 

<div class="form-group" id="parentID"> 
    <input class="form-control" placeholder="ID Number (10 max numbers)" id="childID" name="idnumber" type="text" maxlength="10" required autofocus> 
    <span id="checkID"></span> 
</div> 

</body> 
<script> 
var ID = $("#childID").val(); 

if (ID.indexOf(".") != -1) { 
    $("#checkID").html("ID number must contain numbers only"); 
    $("#checkID").css("color", "orange"); 
} 

$(document).ready(function() { 
    $("#childID").keyup(checkPasswordMatch); 
}); 

//In this function it will disable special characters in user input but still accepts the '.' and '>' character type, what keycode is it to disable that 2 character? 
$(function() { 
    $('#parentID').on('keydown', '#childID', function(e) {-1 !== $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) || /65|67|86|88/.test(e.keyCode) && (!0 === e.ctrlKey || !0 === e.metaKey) || 35 <= e.keyCode && 40 >= e.keyCode || (e.shiftKey || 48 > e.keyCode || 57 < e.keyCode) && (96 > e.keyCode || 105 < e.keyCode) && e.preventDefault() }); 
}) 
</script> 
</html> 

我希望當輸入字段檢測到keyup上的點時出現span id =「checkID」。我試過使用indexOf(),但span標籤不會出現。誰能幫我?

回答

2

我已經更新在撥弄你的代碼。請在下面的小提琴鏈接中找到更新的代碼。剛剛添加了一個功能並更新了按鍵事件和按鍵事件。

$(function() { 
    $('#parentID').on('keypress keyup', '#childID', function(e) { 
     if(isNumber(e)){ 
      $("#checkID").html(""); 
     } else{ 
      //e.preventDefault(); 
      $("#checkID").html("ID number must contain numbers only"); 
      $("#checkID").css("color", "orange"); 
     } 
    }); 
}); 


function isNumber(evt) { 
    evt = (evt) ? evt : window.event; 
    var charCode = (evt.which) ? evt.which : evt.keyCode; 
    if (charCode > 31 && (charCode <= 46 || charCode > 57)) { 
     return false; 
    } 
    return true; 
} 

參見Demo

它顯示該錯誤消息。如果您不想允許其他字符,請取消註釋//e.preventDefault();

2
$("#childID").keyup(function(){ 

    if ($("#childID").val().indexOf('.') > -1) { 

    alert('dot'); 
    } 


}); 

Working Demo 1

Working Demo 2

+0

這段代碼工作得很好。謝謝 –

+0

@laurencekeithalbano:太好了!看看這個演示https://jsfiddle.net/amarsingh/2vjoh4xb/1/ –

+0

@laurencekeithalbano:你看到我的第二個演示?如果用戶繼續使用圓點打字,警告仍然存在。警報消息始終顯示爲紅色。但是,如果用戶繼續使用點號打字,則您接受的答案在該警報消息中會消失。你真的覺得答案更正確嗎? –

2

試試這個這個檢查實時

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 

 
<style type="text/css"> 
 

 
</style> 
 

 
<body> 
 

 
first name :<input type="text" name="firstname" class="tfield" id="myinput"> 
 

 

 
</body> 
 
<script type="text/javascript"> 
 

 
$(document).ready(function(){ 
 
\t $("#myinput").on('change keyup keydown',function(){ 
 
\t \t var thetext = $(this).val(); 
 
\t \t if (thetext.indexOf('.') != -1) 
 
\t \t { 
 
\t \t \t alert("contains dot sign") 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t //no need 
 
\t \t } 
 
\t }); 
 
}); 
 

 

 
</script>

1

只需編寫一個javascript函數來檢查charCode。點的keyCode是46.所以javascript函數可能會這樣

$('#childID').keypress(function (e) { 
    //if the letter is dot 
    if (e.which == 46) { 
     //display alert error message 
     alert("you cant enter dot"); 
     $(this).focus(); 
     return false; 
    } 
}); 

這不會讓用戶在文本字段中輸入點。
演示:

<!DOCTYPE html> 
 
<html> 
 
<title></title> 
 
<head> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 

 
<style type="text/css"> 
 

 
</style> 
 

 
<body> 
 

 
Enter text :<input type="text" name="childID" id="childID"> 
 

 
</body> 
 
<script type="text/javascript"> 
 

 
$(document).ready(function(){ 
 
\t $('#childID').keypress(function (e) { 
 
     //if the letter is dot 
 
     if (e.which == 46) { 
 
      //display alert error message 
 
      alert("you cant enter dot"); 
 
      $(this).focus(); 
 
      return false; 
 
     } 
 
    }); 
 
}); 
 

 

 
</script>