i have this code to accept valid int or float numbers.
$("input").on("keypress", function(event) {
$(this).val($(this).val().replace(/[^0-9\.]/g, ''));
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
however, I was not able to catch user input data by copy-paste and rightclick-paste event.
I tried $("input").on("input",... but not working. Please see fiddle demo below.
Fiddle Demo
You can listen to the paste event and check numeric only after a 0ms setTimeout to let the value be pasted in. You'll see a flash of whatever is pasted in so it's not an ideal solution but could be workable.
$("input").on("keypress", function(event) {
$(this).val($(this).val().replace(/[^0-9\.]/g, ''));
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
$("input").on("paste", function(event) {
var element = $(this);
setTimeout(function(){
element.val(element.val().replace(/[^0-9\.]/g, ''));
}, 0);
});
Related
Hi I want to restrict zero and dot for a field and it is working, But when the field is in pop up then the below code is not working.
<script>
$('#name').keypress(function(e){
if (this.selectionStart == 0 && e.which == 48 || this.selectionStart == 0 && e.which == 46 ){
return false;
}
});
</script>
Since your modal's DOM is generated dynamically on click event, $('.abc').keypress doesn't bind to it (because the modal's DOM doesn't exist yet).
You could make use of event bubbling in such cases. In your case, you could declare the event handler like:
$(document).on('keypress', '.abc', function(e){
if (this.selectionStart == 0 && (e.which == 48 || e.which == 46) ){
return false;
}
});
This means all keypress events on an element with .abc will bubble up to the document, and the event handler will be triggered.
Here's the updated fiddle: http://jsfiddle.net/hcyj3q6q/398/
You are attaching click event on dynamically inserted element. For this
So instead of...
$(document).keypress('.abc', function(e){
if (this.selectionStart == 0 && (e.which == 48 || e.which == 46) ){
return false;
}
});
You can write...
$(document).on('keypress', '.abc', function(e){
if (this.selectionStart == 0 && (e.which == 48 || e.which == 46) ){
return false;
}
});
See this to know more How to add event on dynamically inserted HTML
you can try like this(Javascript)
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode == 48 || charCode == 46
)
return false;
return true;
}
here I have created a fiddle https://jsfiddle.net/vinothsm92/8qde7gnk/2/
I am new to wordpress developement.I wabt to apply my own validation to contatc form 7.Adding same in Header.php file but getting no result.
adding this for mobile number validation in header.php file
<script type="text/javascript">
$("#field-mobile").keydown(function(event) { // Allow only backspace and delete
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) { // let it happen, don't do anything
} else {
// Ensure that it is a number and stop the keypress
if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
});
</script>
That is so simple, the script does not work since your code is run before your input text is exist on DOM.
You should add $(document).ready() function then put your block of codes in that function.
I guess this is should work now:
$(document).ready(function() {
$('#field-mobile').bind('keypress', function(e) {
if (e.keyCode == 46 || e.keyCode == 8 || e.keyCode == 9) { // let it happen, don't do anything
} else {
console.log('else block')
if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
}
});
});
I need to restrict user input to allow only a integer or a two decimal number with a limit from 0 till 99999.99.
Tried with script but not succeed in all scenarios.
also, required this should work with mobile OS also.
$('#txtamount').keydown(function (event) {
if (event.which == 8 || event.which == 9 || event.which == 37 || event.which == 38 || event.which == 46) {
//event.preventDefault();
return true;
}
alert('final' + event.which);
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
return false;
event.preventDefault();
}
var text = $(this).val();
if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2)) {
return false;
event.preventDefault();
}
});
Tried with below stuff but, not working to restrict special chars.
http://jsfiddle.net/jquerydeveloper/LmHkD/
Instead of using keycode detection, probably better to use a regex and onchange, rather than keydown.
$(document).ready(function () {
$('input[name="number"]').change(function (e) {
var valueEntered = $(this).val()
var regex = /^[0-9]{1,5}(\.[0-9]{2})?$/
if (!regex.test(valueEntered)){
$(this).val(''); //set value to nil, consider also display message
}
});
});
I'd also modify the input type to be a number, rather than text:
<input name="number" type="number" value=" " />
JSFiddle: http://jsfiddle.net/LmHkD/259/
Note, this will just get you started, you may need to update the regex for your exact scenario
<div>
<input type="text" class="allownumericwithdecimal"/>saadad
</div>
$(".allownumericwithdecimal").live("keypress keyup ", function (event) {
$(this).val($(this).val().replace(/[^0-9\.]/g, ''));
var text = $(this).val();
if (!((event.which >= 48 && event.which <= 57) || event.which == 8 || event.which == 46 || event.which == 110 || event.which == 0)) {
var text = $(this).val();
if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.'), text.indexOf('.').length).length > 2)) {
//event.preventDefault();
}
}
var text = $(this).val();
if ((event.which >= 48 && event.which <= 57) && (text.indexOf('.') != -1)) {
if ((text.substring(text.indexOf('.'), text.indexOf('.').length).length) > 2) {
//event.preventDefault();
}
if (event.which == 190) {
//event.preventDefault();
}
}
if (text.indexOf('.') != -1 && event.which == 190) {
if (text.match("^[0-9]+(\.[0-9]{0,2})?$")) {} else {
$(this).val('');
}
}
if (text.indexOf('.') == -1 && text.length > 7 && (event.which != 190 && event.which != 8 && event.which != 46 && event.which != 110 && event.which != 0)) {
event.preventDefault();
}
});
http://jsfiddle.net/Lx9h2smh/
The problem is If I type a value in textBox say 3434 and now I want to make it 35434 by putting cursor after 3 and pressing 5, it works fine in Firefox and IE but in chrome the 5 get added after value and it becomes 34345.
The culprit line is one which replace non numeric characters.
How to handle this issue??
Try this code, it runs. jsFiddle
I just do a test
if ( /[^0-9\.]/g.test($(this).val()) ) {
$(this).val($(this).val().replace(/[^0-9\.]/g,''));
}
Explain
You just make sure that the user enter the value of what you want. You replace if the entered value is not an integer. Your regex mean: "Those which are not integer or dot (.), replace them with an empty value". That why You need to make this test. Therefore, if the user enters the value you want, it doesn't do the action replace and it doesn't pass to the test.
$(".allownumericwithdecimal").live("keypress keyup ",function (event) {
var caretP= $(this).getCursorPosition();
$(this).val($(this).val().replace(/[^0-9\.]/g,''));
var text = $(this).val();
if (!((event.which >= 48 && event.which <= 57) || event.which ==8 || event.which ==46 || event.which ==110 || event.which ==0) )
{
var text = $(this).val();
if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.'), text.indexOf('.').length).length > 2)) {
//event.preventDefault();
}
}
var text = $(this).val();
if((event.which >= 48 && event.which <= 57) && (text.indexOf('.') != -1))
{
if((text.substring(text.indexOf('.'), text.indexOf('.').length).length)>2)
{
//event.preventDefault();
}
if(event.which==190)
{
//event.preventDefault();
}
}
if(text.indexOf('.') != -1 && event.which==190 )
{
if(text.match("^[0-9]+(\.[0-9]{0,2})?$")){
}
else{
$(this).val('') ;
}
}
if(text.indexOf('.') == -1 && text.length>7 && (event.which!=190 && event.which !=8 && event.which !=46 && event.which !=110 && event.which !=0)){
event.preventDefault();
}
$(this).selectRange(caretP,caretP);
});
(function($) {
$.fn.selectRange = function(start, end) {
return this.each(function() {
if (this.setSelectionRange) {
this.focus();
this.setSelectionRange(start, end);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
$.fn.getCursorPosition = function() {
var input = this.get(0);
if (!input) return; // No (input) element found
if (document.selection) {
// IE
input.focus();
}
return 'selectionStart' in input ? input.selectionStart:'' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
}
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div>
<input type="text" class="allownumericwithdecimal"/>saadad
</div>
kepress seems to be the culprit when I changed the fiddle to just use keyup the replacement happened correctly (though the cursor shifted to the end)
http://jsfiddle.net/Lx9h2smh/1/
Just remove the 'keypress' event keypress event is very similar to the keydown event. If you press a button keypress event cannot identify the character. In your code it takes as current input Empty so it replace the character.
This is my code
$(currentClass).keypress(function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
The only problem with this is that, every time I hit a key for the first time regardless a letter or a number, it shows up in my content editable span tag. However, the second time I hit a letter key the code works, it only accepts number. I have no idea what is wrong with this code in the first pressing of keys.
Use JQuery's .on() method.
$(currentClass).on("keypress",function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
This is what I used
if ($.inArray($event.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
($event.keyCode == 65 && $event.ctrlKey === true) ||
// Allow: home, end, left, right
($event.keyCode >= 35 && $event.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if (($event.shiftKey || ($event.keyCode < 48 || $event.keyCode > 57)) && ($event.keyCode < 96 || $event.keyCode > 105)) {
$event.preventDefault();
}
I was able to solve the problem with this. If their suggestion is not working try this.
Bind Properly your events
$(document).ready(function(){
$(body).on("keypress","currentClass",function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
});
$(currentClass).on('keypress', function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
e.preventDefault();
alert("pressed");
return false;
}
});
event - on
This might helps you :)