I have the following code: https://codepen.io/ion-ciorba/pen/MWVWpmR
The problem is on "Suma solicitata" value, there you can click and edit the value, but when trying to replace a number inside the whole one, the newly replaced number will go to the end of it. How can I fix this, I think it's because of that:
var preventOnlyLetters = function (event) {
$(this).val($(this).val().replace(/[^\d]+/, ""));
}
It's happening because you are triggering this function both on keypress and keyup. You should only have it on either keyup or keypress. But I think it would be much better if you just make the input type="number"
Related
I trying to get cursor position inside input field, which is type number
<input type="number" id="myInput">
And I tried standard selectionStart property, but apparently it does not work for number fields.
var start = document.getElementById("myInput").selectionStart;
Is there any why or workaround to get that information inside keypress event?
My end goal is it prevent leading zeros in such input field, for that I need to know is user input coming to start of existing value.
Currently I stripping those zeros in keyup event:
var inputFieldValue = $(this).val();
$(this).val(removeLeadingZeros(inputFieldValue)); // removeLeadingZeros: inputString.replace(/^0+/, "");
But with that solution those zeros became visible for a second before been removed,
that behavior I want to prevent.
Any ideas? How I can get end result string before it provided to user inside input element? Even as selectionStart value not available for number input, browser somehow know where to put those new characters, so there must be some way to capture that and may be prevent some default behavior or stop bubbling.
You can try RegExp
<input type="number" id="myInput">
$("#myInput").on("input", function() {
if (/^0/.test(this.value)) {
this.value = this.value.replace(/^0/, "")
}
});
I have a form where a user will set up a new Username. The issue is user's have been creating username's with a space and I want to avoid that.
I have been able to detect when there is a space using the following:
var hasSpace = $('#usernameValue').val().indexOf(' ')>=0;
However I cannot figure out to have the form check for that space when the user is typing in that input section.
How would I change my code to do this?
Thank you!
As suggested you can use the keyup function. This example checks if you entered space and alerts the user
$('#usernameValue').keyup(function(e) {
if (e.which === 32) {
alert('you entered space');
// Do whatever logic is needed here
}
});
Working JsFiddle
Are you using an input tag?
If so, you can use the pattern attribute to define a regular expression that doesn't accept whitespaces. For example:
<input type="text" name="username" pattern="/^\S*$/">
For more information: https://www.w3schools.com/tags/att_input_pattern.asp.
Using onkeyup event.
input.onkeyup = function(){
var hasSpace = $('#usernameValue').val().indexOf(' ')>=0;
}
Is there a way, on document ready / page load, one can listen for more than three characters being typed in a row that don't do anything else, while nothing else is focused, and if that event occurs transfer those three characters and anything else that is typed after into an input-field of type text / search that is hidden — either by the display, visibility, or opacity CSS properties?
I would appreciate any help in doing this.
I have done something like this with a label and radio-button / check-box that is hidden. But that is because the input is just a click on the label. Not as complex as alpha-numeric input.
If you can help me with any part of achieving the above, I would greatly appreciate it.
Should be straight forward:
var keys = [];
$(document).on('keypress', function(e) {
keys.push( String.fromCharCode(e.which) );
if (keys.length > 2)
$('input').fadeIn(400).val( keys.join('') );
});
FIDDLE
Your question is vague, but what you could do is call .focus() on the input whenever any other input has the event onblur and use the oninput event for your hidden field.
You can bind keypress to the document and store the result in a variable until you're ready, something like:
var typedString = "";
$(document).keypress(function(e){
typedString += String.fromCharCode(e.keyCode);
if(typedString.length >= 3){
$('#some-textbox').show();
$('#some-textbox').val(typedString);
}
});
I have an input field called email class keyup-an. I validate it easy with this, but it works or when an individual inputs the field manually. How do i make it work also for selecting historical data. when you click email and yesterday you put test#test.com, the history list drops down and you can select it, but its not a keyup.
I TRIED the same function after but with .change or .click and it didnt work. Can you guys please suggest?VALID
$('.keyup-an').keyup(function() {
$('span.error-keyup-1').hide();
var inputVal = $(this).val();
var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/;
if(!numericReg.test(inputVal)) {
$(this).css('background', '#FAC3C3');
$(this).after('<span class="error error-keyup-1">Validationfail</span>');
}
else {
$(this).css('background', 'lightgreen');
}
});
you can do this by
autocomplete='off'
example
<form name="form1" id="form1" method="post" autocomplete="off">
or try something like
$(input).autocomplete().keyup(function(event) {
event.stopPropagation();
}).keydown(function() {
$(this).autocomplete('search', $(input).val());
});
good read
How to Turn Off Form Autocompletion
If I understand you correctly, you want an event which gets triggered if you click on the autocomplete item.
This is a known bug, check out this article about a jquery plugin, I think this is exactly what you need:
http://furrybrains.com/2009/01/02/capturing-autofill-as-a-change-event/
Instead of binding your function to the keyup event.. maybe bind it to change event?
ok.. this doesn't work on some browsers it seems.. you can refer to the previous answer and use the solution, which basically creates a timer to check the values in intervals to detect changes. Forcing the browser to do a lot of work if you want the validation to happen very fast imo.. Or you could turn of autocomplete and force the user to enter the values manually like the first answer suggested.
I know if I want to change the value of an input on a form according to what a user types into another input using:
$('#inputName').change(function() {
$('#inputURL').val($('#inputName').val());
});
But I'd like to have it so when someone types into the input it updates a Div with the text instead. IE they type into #inputName and this happens:
<div id="personsName"> text appears here as they type</div>
How'd I go about doing that? I doesn't work when I change #inputURL into #personsName :(
The change event is only triggered when leaving the textfield, so use keypress instead if you really want to "update the text on typing into a text field". .val only applies to form elements which actually have a value (e.g. <input> and <textarea> elements). In all other cases, you need the text method for modifying the text .
$("#inputName").keypress(function () {
$("#personName").text(this.value);
});
You can test this code here: http://jsfiddle.net/ntBnA/
You're almost there:
$('#inputName').change(function() {
$('#personsName').text($('#inputName').val());
});
//Cache this bad boy, its being repeatedly used!
var personsName = $('#personsName');
$('#inputName').bind({
keyup: function () {
//This is what you want.
personsName.text($(this).val());
},
change: function () {
//This is what you were doing. See the difference?
$('#inputURL').val($(this).val());
}
});