After regular expression overwrite text in a html input field - javascript

I have several input fields that I need to filter the input on.
I've put them in a class and used a regular expression to limit the characters to numbers, letters, and underscore.
That works fine, but when I tab from one input field to the next, the cursor moves to the end of the input text. I want it to be highlighted so that it can be typed over if desired instead of having to highlighting it with the mouse first.
<input type="input" class="jqfc" value="one"><br>
<input type="input" class="jqfc" value="two"><br>
<input type="input" class="jqfc" value="three"><br>
<input type="input" value="highlights"><br>
jQuery('.jqfc').keyup(function () {
this.value = this.value.replace(/[^a-z0-9\_]/gi, "");
});
sample:
http://jsfiddle.net/ngwr6/2/

jQuery('.jqfc').keyup(function (e) {
if (e.keyCode !== 9){
this.value = this.value.replace(/[^a-z0-9\_]/gi, "");
}
});
This way it wont run the logic if the tab key is pressed. I thought of doing something like select(), but then that happens every time you type.

This ought to do the trick:
jQuery('.jqfc').keyup(function () {
var regex = /[^a-z0-9\_]/gi;
if(this.value.match(regex)){
this.value = this.value.replace(regex, "");
}
});
jQuery('.jqfc').on('focus, click', function(){
this.select();
});
http://jsfiddle.net/ngwr6/5/

Related

Replace dot and comma while typing and Replace in Inputfield

I would like to disallow the user to type comma or dot while typing in the input field of the type number.
I have already searched and found solution, but it does not work.
If I type e.g. point, no matter which of the two solutions below, the input field is cleared.
This is my input field
<input type="number" class="form-control numbersOnly" name="angebot" id="angebot" min="1" step="1" placeholder="<?php the_field('language_shop_detail_button_counter_offer_placeholder', 'option'); ?>">
Those are the 2 approaches that don't work.
jQuery('.numbersOnly').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
and
$('.angebotAbgebenContainer #angebot').keyup(function(event) {
var current = $(".angebotAbgebenContainer #angebot").val();
console.log("current", current);
var replaced = current.replace(/\./g, "");
console.log("replaced", replaced);
//replaced = parseInt(replaced);
// $('.angebotAbgebenContainer #angebot').val(replaced);
});
Those are the 2 approaches that don't work. As soon as I make a point, in both approaches, the input field is cleared.
But what I want is, if someone tries to type a point or a comma, it doesn't appear and if someone copy pastes a number, the comma and point must also be gone.
This works for me
Note it is type text
$('#angebot').on("input",function(event) {
var current = $(this).val();
console.log("current", current);
var replaced = current.replace(/[\D\.,]/g, "");
console.log("replaced", replaced);
$(this).val(replaced);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="text" id="angebot" />
If you are going to input numeric values in the input only, might as well disable the inputting of all keys except numeric, like:
$(document).on("keypress keyup blur", ".numbersOnly", function (event) {
$(this).val($(this).val().replace(/[^\d].+/, ""));
if ((event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
Where 48 - 57 represents keycodes, you can find all keycodes here.
Can use prevent default as below, and on change for paste
$(function() {
$('#angebot').on('keydown', function(e) {
if (e.keyCode == 188 || e.keyCode == 110) { // 188 for comma, 110 for point
e.preventDefault();
}
}).on('change', function() {
var self = $(this);
self.html( self.html().replace(new RegExp(',', 'g'),'') ); // Remove all commas.
self.html( self.html().replace(new RegExp('.', 'g'),'') ); // Remove all points
});
})

jQuery to prevent user from inputting if regular expression is not matched by using preventdefault

Every time user enter, value is checked with regular expression, I'm trying to restrict user from entering further into input field if regexp is not matched
Using keyup event, preventdefault never fires and using keypress event, user is unable to input at all because in the begining, value in input field shows as "" (nothing)
var discountRegex = /(^100([.]0{1,2})?)$|(^\d{1,2}([.]\d{1,2})?)$/
$("#" + (idOfElement)).on("keyup",function (e) {
var val=this.value
var k = e.keyCode
if(k==46 ||(k > 48 && k <97)){
console.log(k)
return discountRegex.test(val);
}
});
in the above code idOfElement is the id i get on whichever field i focus.
Please refer sample code. If input key is invalid input will not accept it. Also please find fiddle for same in comment.
<input type="text">
$(document).ready(function(){
$("input").bind('keypress', function(e) {
var str = e.keyCode;
if (/(^100([.]0{1,2})?)$|(^\d{1,2}([.]\d{1,2})?)$/.test(str)) {
alert('Invalid')
e.preventDefault();
} else {
alert('Valid');
}
});
});
You can check if the regex is matched and if not you can remove the last char like the example below
I updated the code with keydown example
Example

Detect/Prevent unicode (alt + numpad) characters in inputs using jquery

I'm struggling to prevent input of alt + numpad unicode characters.
The alt key doesn't seem to register on keyup and will enter the unicode character regardless. (try something like 'alt + 1' in the example code snippet below to see what I mean.)
I've tried something like the following that attempts to restrict non-numeric characters:
$("#myInput").on('paste keyup keydown change', function(event) {
var $input = $(this);
var value = $input.val();
// remove whitespace
value = value.replace(/\s+/g, '');
// remove unwanted characters
value = value.replace(/[^0-9]+/g, '');
$input.val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myInput" type="text">
Is there an event I should be looking for instead of the above 4? (paste keyup keydown change)
I was able to prevent them on the keypress event...
function noteKeyPress(event) {
if(event.code.slice(0,3) == 'Alt'){
event.preventDefault();
event.stopPropagation();
}
}
This page was a great help

Mask if more then x characters

I am using a masking plugin (http://digitalbush.com/projects/masked-input-plugin/) it works, but I am trying to get it to only work once there are 5+ characters in the textbox. Whenever I hit the 6th character, it clears out the textbox and won't accept input anymore.
JS:
<script>
function convert(){
if (l.length > 5){
$("#q").mask('(999) 999-9999');
}
}
</script>
HTML:
<form action="search.php" method="GET">
<input type="tel" class="form-control" name="q" id="q" placeholder="Phone/Order Number" onkeyup="convert()"><br>
<button type="submit" class="btn btn-default">Search</button>
</form>
if someone could please help me, that would be great. :D
It clears out the textbox because when you apply a mask, the plugin clears the input. You can get around this by passing the autoclear option and set it to false. It would also keep attempting to apply the mask, so you'd have to remove the event listener. So ditch the inline event handler, that's a bad way to do event handlers anyway :-)
Something like this would work:
$('#q').on('keyup', function() {
var $el = $(this);
var val = $el.val();
if (val.length > 5){
$el.mask('(999) 999-9999', {
autoclear: false,
placeholder: ''
});
}
});
Note that I also set the placeholder to an empty string, otherwise when the mask is applied the cursor will be set to the end of the mask placeholder and you'd have to move the caret back a few spaces.
This will detect a Backspace and revert it from phone number mask to a plain mask
$('#q').on('keyup', function(event) {
var $el = $(this);
var val = $el.val();
if (val.length > 5){
$el.mask('(999) 999-9999', {autoclear: false,placeholder: ''});
}
if (event.keyCode == 8){
$el.mask('999999', {autoclear: false,placeholder: ''});
}
});

In jQuery, how to detect specified string while user is typing it?

Much like when typing a comment on Facebook and you hit #username, it reacts to that, letting you choose a username inline.
Using jQuery, how would one go about hooking up an event listener for [text:1]. I want an event to fire when the user has entered [text: into a text field.
Zurb created a textchange plugin that will help. See their "Validate Text" example towards the bottom, i believe its almost exactly what you're looking for..
http://www.zurb.com/playground/jquery-text-change-custom-event
use keyup function to trigger. Split all the string and check it.
[UPDATE]: More Improved Version
<script>
var totalcount=0;
$(function (){
$('#text').keyup(
function (){
var arr = $(this).val().split(" ");
var matchitems = count('hello', arr);
//console.log(matchitems);
if(matchitems > totalcount){
alert('hello');
totalcount = matchitems;
}
if(matchitems < totalcount)
{
totalcount = matchitems;
}
}
)
})
function count(value, array)
{
var j=0;
for(var i=0;i<array.length;i++)
{
if(array[i] == "hello"){
j++;
}
}
return j;
}
</script>
<input type="text" id="text" />
})
</script>
<input type="text" id="text" />
Using keyup like #experimentX mentioned is the way you want to go b/c then you'll know that your user has inputed value then. However, running a for loop would be extremely costly on every single keyup event. Instead, since you know the value you want already, you can use a preset regexp to search for your value:
<input type="text" id="text" value="" />
<script>
$(function () {
var $input = $('#text');
$input.keyup(function (e) {
var regexp = /\[text\:/i,
val = $(this).val();
if (regexp.test(val)) {
console.log('i have it: ', val);
}
});
});
</script>
Here are a couple additional scenarios on how you can write the actual regexp.
You want the string to be at the very beginning of the input: var regexp = /^\[text\:/i;
Building on the one above, but incorporate any amount of whitespace in front of the text you actually want: var regexp = /^\s+?\[text\:/i;

Categories