Previously I have done a useful function for user to auto populate dashes after a length of string.
To understand my scenario :
I have a text box for user to key in Mobile No.
To make the value inserted is the same format, I code a script to auto insert a dash a length of char.
The problem is, whenever I want to erase the inserted value, the script wont allow me as it auto populate the dash after a length of
string unless I press the "backspace" longer then only I can erase
the inserted value.
Here is my script for the auto inserted dash :
$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(){
if ($(this).val().length == 5){
$(this).val($(this).val() + "-"); }
}); });
and here is the image of the text box
Mobile No. Text Box
Please help, Thank You.
Regards
Try adding a Validation to avoid adding the "-" when user presses the backspace
$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(e){
if ($(this).val().length == 5 && e.which != 8){
$(this).val($(this).val() + "-"); }
}); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="Mobile No. Text Box">
There are plenty libraries out there which can help you with this problem. I personally recommend this one https://github.com/text-mask
You can read through plain vanilla JavaScript usage right here https://github.com/text-mask/text-mask/tree/master/vanilla#readme
I believe its first example is a basic phone-number input which is exactly what you are looking for.
Related
I have a input field
<input type="text" [value]='$' (keydown)="handleKeyDown($event)">
Dollar sign is prefilled.
How can I restrict user to enter only the pattern '$1,000.00' (US dollars with $ prefix);
So far , I was able to restrict the user from entering values other than $ , . and numbers But, they can enter consecutive commas, dollar symbol and dots.
handleKeyDown(event:any){
let key = event.keyCode || event.which;
if((key>=48 && key<=57) || (key===52 || key===190 || key===188 || key===8)){
return true;
}else{
return false;
}
}
To restirct that I am using a Regex and regex works fine. But, I am not sure in which event I should use the Regex.test(), because if I use it in keyup() event the character is already populated in the text filed, there is no point in doing event.preventDefault().
If I do it in keydown() event then I can not extract the complete value of the text field before the keydown() event is finished. And I should also accomodate copy and paste in the field.
There is no privision for blur event, I need to check this during the user input only, and avoid it from appearing in the text filed.
Is there anyway to achieve this? Would you suggest an easier way using the reactive form input field?
Like Sebastian Ciocarlan said you can remove the $ from the input and just allow numbers and commas if you don't need to store the $.
But instead of using a <div> you can use matPrefix from angular material (if you use it) to add $ in front of your input (or matSuffix if you want to put it at the end).
You can see an exemple here : https://material.angular.io/components/form-field/overview#prefix--suffix
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;
}
Does anyone know if it's possible to add a plus sign in a html input type=number field? I have a scenario whereby users need to enter a modifier value which is either +1 to +10 or -1 to -10. I want to make it very explicit to the user that their inputted value increments the resulting value. therefore it would be great if a + sign is prepended to a positive inputted value.
I'm using this input in an Angular2 reactive form with bootstrap styling. so an Angular2 directive, a boostrap style or even a jquery solution are welcome
What I've seen so far is about adding currency symbols inside the form control or about adding + and minus buttons to increment and decrement the value. But that's not what I want, so I doubt if this is possible at all.
I don't think it is possible to manipulate the input.
The default behavior is "-" for negative and no sign for positive numbers.
Even if you checked some custom UI frameworks like:
JQuery UI, Bootstrap, Angular Material ... you will not get the wished behavior.
I guess the only solution for this is to write your own custom code.
Two scenarios are possible:
1- An input with Text and the manipulating will be done in Javascript.
2- Create a pipe in angular2 and give it to the element which I think is much easier than the first one.
No it's not possible. The number field only accepts -, 0-9 and e to be entered. As a workaround you could place the + in the HTML before the input, eg:
+ <input type="number" />
Alternatively you could use a standard type="text" input, but that would mean creating your own validation logic which would make the code much more complex.
I hope this will help on you guys!!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).on('keypress','#input',function (e) {
var keyCode = e.which;
if ($(this).val().trim().charAt(0) == "\u002B") {
if ( keyCode == 43 ) {
return false;
}
}
else{
for (var i = 1; i < $(this).val().length+1; i++) {
if(i!=0){
if ( keyCode == 43 ) {
return false;
}
}
}
}
});
$(document).on('input', '#input', function() {
this.value = this.value.replace(/[^+{1}|^0-9]/g,'');
});
</script>
I have a div with a string of content in it. The content is not stored in a variable and I would like to remove the last character of the text in this div. Any help please?
More info:
I have a text field, and upon entering text into the text field, the text appears in a div in large writing. When the user hits the back-space key, I want the last character in the div to be deleted. I am mainly using jQuery to achieve this. Here is my code:
$(document).ready(function(){
$("#theInput").focus(); //theInput is the text field
$('#theInput').on('keypress', printKeyPress);
function printKeyPress(event)
{
//#mainn is the div to hold the text
$('#mainn').append(String.fromCharCode(event.keyCode));
if(event.keyCode ==8) //if backspace key, do below
{
$('#mainn').empty(); //my issue is located here...I think
}
}
});
I have attempted $('#mainn').text.slice(0,-1);
I have also tried storing the value of #theInput in a variable and then printing it, but that didn't work. Any ideas ?
$('#mainn').text(function (_,txt) {
return txt.slice(0, -1);
});
demo --> http://jsfiddle.net/d72ML/8/
Are u sure u want to remove only last character. What if the user press backspace from the middle of the word.. Its better to get the value from the field and replace the divs html.
On keyup
$("#div").html($("#input").val());
var string = "Hello";
var str = string.substring(0, string.length-1);
alert(str);
http://jsfiddle.net/d72ML/
I have a input on my page where I am asking the user to type in any value and based on his entry the values are displayed from the database.
For example if the user types p in the input box he is displayed programmer 1 and programmer 2 just as it does in google.com. This I am doing through ajax.
My problem is after programmer 1 and programmer 2 is displayed, the ↓ Down Arrow key doesn't bring the control to the programmer 1 but rather keeps the control on the search box and the user has to click on any of these options. I want the user to be able to use the ↓ down arrow key to come down to his search suggestions.
I have tried to implement Focus functions but it doesn't seem to work and I don't really know how to look for this information?
Code:
<input type="text" name="searchbox" class="search_input" id="searchboxid" autocomplete="off" autofocus="on" onkeyup="suggest(this.value)" placeholder="Please search here..."/>
Any help will be much appreciated.
Just a suggestion.
Instead of fighting with your own code or going for keybinding stuffs. Its better to use jquery autocomplete.You can easily port your code to fit with Jquery auto complete.Its giving the option what you are expecting.
Refer the URL below.
http://jqueryui.com/autocomplete/
Try with autosuggest or with autocomplete on. If none works , try key binding via hex code for down arrow. It is little dark , but it works in many cases , only prob could be AV's , which could recognise it as a keylogger.
Oke short tell: i'll put in code later (15 minuts)
Html:
<input type=""text id="r0">
<div id="r1">the damn results</div>
<div id="r2">another dman result</div>
Jquery:
$("body").keydown(function (e) {
if (e.keyCode == 38) { //up-arrow
//check wich one is focus
//?????
//r
if ($("#" + rId).length > 0) {
//focus on this element
}
}
if (e.keyCode == 40) { //down-arrow
//check wich one is focus
//?????
//r
if ($("#" + rId).length > 0) {
//focus on this element
}
}
});
Raw i will work it out in a second