We Keep Coding

I'm using Javascript for automatically adding hyphens to phone number. Need to modify this to also remove hyphens automatically, or find a new fix

I found a very useful bit of JS from another thread for automatically hyphenating numbers, but a by-product of that is that now they've entered 10 numbers (US phone number) but if they want to delete and change it, they will have to delete the hyphens as well. I realize this is not a huge deal but it's annoying me and I wanted to find a better solution.
A couple of different options come to mind, just not sure what is possible:
Add/modify my code so that as they delete, it automatically removes the hyphens as they delete their numbers, so they are only pressing backspace 10 times instead of 12.
Have the appearance of hyphens in the text box but they are not actually in the text input area...just like a "background image" so to speak. I tried to do this with a background SVG for the text area but I was not able to solve the problem of automatically spacing out the phone number around the fake hyphens. As for this possible solution, I am fine with these being there all the time even before anything is typed, or appearing once they begin typing the number.
I have searched extensively but have not found anything for what I need. I am sure that a thread already exists but I just haven't searched for the right terms. if anyone has a link to one, even that would be amazing.
Here is my existing code...hopefully this is something I can accomplish with adding something simple. Any help is greatly appreciated.
$('#phone').keyup(function(){
$(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'))
});

Since the number is only formatted when a minimum of ten numbers are entered, you can try something like this.
$('#phone').keyup(function(){
if( $(this).val().length < 10 ){
$(this).val($(this).val().replace(/-/g, ''))
}else{
$(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'))
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="phone">

Allow numbers only after some alphabet?

I need to make sure that a certain field only takes numbers as after some default alphabetic characters Like XXX-XX-1234. Here XXX-XX- are default characters which shouldn't be removed. After these alphabets I want the user to be unable to type in any characters other than numbers.
Is there a neat way to achieve this?

You can do with input regex pattern too
<input type="text" name="my_name"
pattern="[A-Za-z]{3}-[A-Za-z]{3}-[A-Za-z]{3}-[0-9]{4}" title="my title">
in your case (removing the number)
<input type="text" name="my_name" value="ABC-DE"
pattern="[A-Za-z]{3}-[A-Za-z]{2}-" title="my title">

Here is a FIDDLE
I wish I could have made this a comment on #scaisEdge 's answer because I just built off of it to add a little more helpful stuff but it is just too much to fit in a comment:
HTML:
<form>
<button>submit</button>
<input type="text" name="name1" value="ABC-DE-" pattern="[A-Za-z]{3}-[A-Za-z]{2}-\d{4}$" title="LLL-LL-DDDD - L is any letter, D is any digit" />
<input type="text" name="name2" value="XXX-XX-" pattern="XXX-XX-\d{4}$" title="XXX-XX-DDDD - D is any digit, rest as is" />
</form>
I used his answer as a base, then did the following to illustrate more:
I added "\d{4}$" to the end of the regex pattern to force 4 numbers then nothing else
I added a new text input that showed how to force explicitly specific characters for the alphebetic/dash portion
I added titles with helpful pattern hints because those are shown in the popup when the pattern is rejected
I put it all in a form with a submit button to show how it all works together
What not to do
I spent a lot of time "rolling my own" code to make a version of a text input that specifically limited all actions on it up front (on input change, keydown, keyup, mouse click) to only allow putting in the last 4 digits and nothing else. It became a game of "chase the corner cases" and I quickly became convinced that using a plugin or library that is thoroughly vetted by the developer community is the way to go for such an endeavor, or using the pattern attribute as discussed above.
Not only was it "vertically oriented" toward this specific pattern, I failed even after much time to iron out all the corner cases and it remained broken.
I even gave an explanation of these difficulties and put up the code and my FIDDLE in this answer, but realized that putting up broken code is just not a good idea on StackOverflow so I made the appropriate edits just now to redo this explanation and get rid of the FIDDLE and code for the alternate route I tried.

Keydown event issue on HTML textbox

I have a field that accepts the year, so I have created
input type="number"
and implemented keydown event to restrict user to enter more than 4 digits.
Now I'm facing an issue and need help in figuring out the logic. Following is the case:
Enter 4 digits in the textbox
Select entered text using SHIFT + Arrow Keys
Now if you type a number it should replace the data but since I have barred it, it will not. Need to cover this case.
Also find code in following JSFiddle.
I also have lot of css and validation on input[type=number], so cannot change to input[type=text].
Also same form is used on mobile devices, and when user selects textbox, numeric keyboard should appear.
Edit 1
while searching for option, I found a JSfiddle that could direct us to right direction.
Issue here also is input[type=number] does not support selection property. Reference
As an alternative, we have decided to move to input[type=tel]. This would work in similar fashion, but will allow us to use maxLength attribute. Still if anyone has a better way, please share.

HTML:
<input type="tel" class="year" maxlength="4" data-temp="">
jQuery:
$(document).on('input', '.year', function(){
var txt = $(this).val();
if(isNaN(txt) || txt > 9999){
$(this).val( $(this).data('temp') );
return;
}
$(this).data('temp', txt);
});
JSFiddle

May be this will work , you can use the Regular Express to validate only number and
^[0-9\.\-\/]+$
and also you can use the .length method to insure that you have specific length

You can't submit an invalid value in this case:
<form>
<input type=number min=0 max=9999 required />
<input type=submit value=Submit />
</form>

So I have moved my code to input[type=tel] and Updated JSFiddle
If you check, I have added 2 events
Keydown to restrict from entering any invalid key.
Blur event to check if entered value is number only or not.
Now you might be thinking, if I have already restricted user to enter only number, how can he enter incorrect value.
Explanation
In my implementation, I have used keydown and using keycode, I'm allowing/blocking. Interesting case is when user press and holds shift key. Now on keydown, I get same keycode but value is different(A special character). So checking the integrity on blur.
A better way would have been handling keypress and keydown together and I'll update fiddle and update my answer, but for now I guess this has solved my problem.
Thanks you all for all comments/answer. Also kindly let me know if there are any better ways to implement.

HTML5: additional chars in input with type="number"

In our app, we have many inputs that are used to fill in school grades. Till now we had
<input type="text" name="mark">
As we're trying to use new features of HTML5, we changed it to
<input type="number" name="mark">
so on mobiles/tablets we have interface with only numbers. And there's the case. It is possible to place in input grades like "5+" and others (for example some two-letter shortcuts "ab" and other). It's customizable by users.
Is there any way to extend input to treat numbers and all that chars as valid WITH extending Android/iOS keyboard layout to only that?
EDIT:
Don't forget that i want to know if i can extend keyboard layout on mobile. If it's not possible, i'll fall back to text with some validation.

I believe you can use the pattern attribute for what you described:
A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.
https://developer.mozilla.org/en/docs/Web/HTML/Element/Input
e.g. <input type="text" name="HasAPattern" pattern="[0-9A-Z]{3}" title="Enter 3 characters">
will result in an input element that allows only 3 characters.
Unfortunately, custom keys are not allowable I believe, so you would have to use a text type that has an added numeric pattern with the attribute above.
Custom keyboards would have to be used for non-standard keyboard layouts/input buttons.

You would probably want just normal text field and use something like JQuery Validate to limit the input and throw warnings if a user enters incorrect data.
Another option would be to trow all possible option into a HTML select tag.
JQuery Validate plugin: http://jqueryvalidation.org/

you can use
<input type="text" name="mark" pattern="[a-z0-9]{2}">
You can specify your regular expression in the pattern and have any character whitelisted
For having 50+ kind of input use the following
<input type="text" name="mark" pattern="[0-9]{2}[+]?">

You could simply use,
<input type="tel" name="mark">
This would do it.

How to replace whitespace with underscore when copy value from form field to another

Someone should be able to find this example for me or give an example..
After hours of searching I found the answer using some bizare search terms in Google only for my 15 month old to close the browser window for me without book marking it! I had private browsing on so it didn't save my history :-(
I have a web form, I need to pass the value of one form field to another form field at the same time replace the white space with underscore using JQuery.
example of what I'm looking for
<input name="PageName" id="PageName" type="text" value="All About Us Page" />
<input name="PageURL" id="PageURL" type="hidden" value="all_about_us_page" />
so when the form is submitted it gives nice formatted URLs to the page(s) I don't know much about JavaScript or JQuery and how to write variable to make it work.
Hope someone can give a working example, so at least I can get it working and in turn help someone searching in vien for the same solution the title of this should rank pretty high in Google for others to follow.

A little jQuery plugin to do something like this (this would put the value of the first matched element into the set of elements matched by the passed in selector):
$.fn.copyTo = function(selector) {
$(selector).val($(this[0]).val().replace(/\s/g, "_"));
};
Example usage:
$("#source").copyTo("#dest");
Here's a working example.

To copy the value from source, to dest, while replacing whitespace with an underscore, this should do it.
$("#dest").val($("#source").val().replace(' ', '_'));
Or to get any whitespace
$("#dest").val($("#source").val().replace(/\s/g, '_'));