Develop Reference

How to input phone no in this 'xxx-xxx-xxxx' format in number input field

I want that whenever I type a number in the number input field in XXXXXXXXXX format it takes as XXX-XXX-XXXX using HTML, CSS and javascript.
Just like this snippet but without using the mask script.
$('.phone_us').mask('000-000-0000');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js" type="text/javascript"></script>
<!--mask script-->
<input type="text" class="phone_us" />

There are some working answers here, but this solution is more stable.
Using the oninput event for instant replace and ...
Applying regex on the full string, to allow copy/paste, and finally ...
This code is shorter as well:
$('.phone_us').on('input', function() { //Using input event for instant effect
let text=$(this).val() //Get the value
text=text.replace(/\D/g,'') //Remove illegal characters
if(text.length>3) text=text.replace(/.{3}/,'$&-') //Add hyphen at pos.4
if(text.length>7) text=text.replace(/.{7}/,'$&-') //Add hyphen at pos.8
$(this).val(text); //Set the new text
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="phone_us" maxlength="12">
Or even without jQuery:
document.querySelector('.phone_us').addEventListener('input', function() { //Using input event for instant effect
let text=this.value //Get the value
text=text.replace(/\D/g,'') //Remove illegal characters
if(text.length>3) text=text.replace(/.{3}/,'$&-') //Add hyphen at pos.4
if(text.length>7) text=text.replace(/.{7}/,'$&-') //Add hyphen at pos.8
this.value=text; //Set the new text
});
<input class="phone_us" maxlength="12">

you could try like this
$(document).ready(function () {
$(".phone_us").keyup(function (e) {
var value = $(".phone_us").val();
if (e.key.match(/[0-9]/) == null) {
value = value.replace(e.key, "");
$(".phone_us").val(value);
return;
}
if (value.length == 3) {
$(".phone_us").val(value + "-")
}
if (value.length == 7) {
$(".phone_us").val(value + "-")
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js" type="text/javascript"></script>
<!--mask script-->
<form id="form1" runat="server">
<input type="text" maxlength="12" class="phone_us"/>
</form>

You can implement like this
document.getElementById('txtphone').addEventListener('blur', function (e) {
var x = e.target.value.replace(/\D/g, '').match(/(\d{3})(\d{3})(\d{4})/);
e.target.value = '(' + x[1] + ') ' + x[2] + '-' + x[3];
});txtphone
<input type="text" class="phone_us" id="txtphone" placeholder = "(000) 000-0000"/>

<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
Use HTML5 input type=tel to get phone number, and pattern attribute to specify any pattern.
[0-9]{3} represent the 0-9 numeric and 3 digits.
Then, add a hyphen (-), and use the numerics pattern again.
You can use own pattern and your country wise pattern like
[1-9]{4}-[1-9]{6} for the format 1234-567890.
Use the min-length and max-length in HTML5 to set limit.
Note that these patterns won't automatically add the hyphens, but will only allow correctly formatted input.
If you want get more patterns, search on web or see HTML5pattern.com

Pure javascript.
Enter 10 digits in the input field and click anywhere outside the input field.
var myTel = document.getElementById("tel");
myTel.addEventListener("blur", function() {
var str=myTel.value;
var pattern=/[0-9]{10}/;
if (pattern.test(str)) {
newstr=str.slice(0,3)+'-'+str.slice(3,6)+'-'+str.slice(6,10);
myTel.value=newstr;
}
else {
// bad
myTel.value='bad value: only 10 digits';
}
})
<form>
<input type="text" id="tel" name="tel" maxlength='10'>
</form>

Add a digit to the end of multiple attributes

I'm trying to grab the end digit of the target div, replace and join two attributes (js-data-reveals) with that digit added at the end (_1).
I know it has something to do with the regular expression that I am using to replace the attributes but I can't figure it out.
Hope you can help.
$('#js-form-group-UPLOAD_DOCUMENT_ID_1').find('input').each(function() {
var attrName = 'js-data-reveals';
var $el = $(this);
//Get Last Digit from ID
var idNumber = $el.attr('id').match(/\d+$/);
var attrs = $el.attr(attrName);
//Split the two attributes in js-data-reveals
var data = attrs.split(',').map(function(item) {
return item.replace(/.{0}$/, function(idNumber) {
return idNumber
});
});
$el.attr(attrName, data.join(','));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="js-form-group-UPLOAD_DOCUMENT_ID_1">
<fieldset>
<input type="file" class="form-control" id="UPLOAD_DOCUMENT_ID_1"
js-data-driven="true"
js-data-reveals="DOCUMENT_TYPE,UPLOAD_DOCUMENT_DESCRIPTION">
</fieldset>
</div>

match() returns an array.
Can simplify this using attr(attrName, function)
$('input[js-data-reveals]').attr('js-data-reveals', function(_, existing) {
var idNumber = this.id.match(/\d+$/)[0];
return existing.split(',').map(function(s) {
// replace number if it already exists or add it if it doesn't
return s.match(/_\d+$/)
? s.replace(/\d+$/, idNumber)
: s += '_' + idNumber;
}).join();
});
console.log($('#UPLOAD_DOCUMENT_ID_1').attr('js-data-reveals'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="js-form-group-UPLOAD_DOCUMENT_ID_1">
<fieldset>
<input type="file"
class="form-control"
id="UPLOAD_DOCUMENT_ID_1"
js-data-driven="true"
js-data-reveals="DOCUMENT_TYPE,UPLOAD_DOCUMENT_DESCRIPTION_999">
</fieldset>
</div>

Remove the '+' in your Regular Expression to make it:
var idNumber = $el.attr('id').match(/\d$/);
The '+' makes a Regular Expression match the given character 1 or more times, so \d+$ would match 12345 in 'd12345'. Since you only want the last digit to match, removing the '+' will make it works as expected.

Enable button only if text is filled in (NO SPACES)

I've looked around for an answer to my question, but all the solutions I have found do not take into account that spaces also work as input.
I have a join function, and the button shouldn't be enabled if a user only enters space. It should need actual text. Anyone has a solution to this?
Here's my function:
$("#join").click(function(){
var name = $("#name").val();
if (name != "") {
socket.emit("join", name);
$("#login").detach();
$("#UsersOnline").show();
$("#msg").show();
$("#messaging").show();
$("#msg").focus();
ready = true;
}

you could use jquery trim()
var name = $.trim($("#name").val());
https://api.jquery.com/jQuery.trim/
EDIT:
As #David Thomas pointed out, we can also use String.prototype.trim()
var name = $("#name").val().trim();
function updateResult() {
var before = $("#name").val().replace(/\s/g,'SPACE');
var name = $("#name").val().trim();
$('#result').text('Before:' + before + "\nAfter:" + name);
}
$(document).ready(function(){
updateResult();
$('body').on('keyup','#name',function(){
updateResult();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>By default value i left left a space for the name</p>
Name : <input type="text" id="name" value=" "><br>
<br>
Value of name : <pre id="result">empty</pre>

Allow only letters on a text field to be displayed

i have this jquery function
$('#contact_name').on('input', function() {
var input=$(this);
var re =/^[A-Za-z]+$/;
var is_email=re.test(input.val());
if(is_email)
{
}
else
{
}
});
for this text field
<label for="contact_name">Name:</label>
<input type="text" id="contact_Name" name="name"></input>
what i want is when the user types a number not letter i don't want the number to be displayed on the text field .. the text field only take letters and allow letters to be displayed on it and if it's a letter then display it .. so the user can know that this text field doesn't take numbers
how to do it ??

You may try this example
html
<input type="text" placeholder="Only letters" id="contact_name"/>
script
$(function()
{
$("#contact_name").on('input', function()
{
this.value=this.value.replace(/[^a-zA-Z]/g,'');
});
});

use this function
function chkLetter(event) {
var v= event.keyCode;
return ((v>= 65 && v<= 90) || v== 8);
};

you can try this way
<script type="text/javascript">
function CheckValue(e){
e=(window.event) ? event : e;
return (/[A-Za-z]/.test(String.fromCharCode(e.keyCode)));
}
</script>
<input type="text" onkeydown="return CheckValue(event)">

Grabbing User Input

First name: <input type="text" name="firstname"></input>
<input type="submit" value="Submit" />
Let's say I have the simple form above. How would I grab what the user inputted in the First Name field in JS. I tried:
document.getElementsByTagName("input")[1].onclick = function() {
inputted = document.getElementsByTagName("input")[0].innerHTML;
}
But that doesn't work. How would I do this?

Use value for text inputs:
inputted = document.getElementsByTagName("input")[0].value;
Also make sure to add var keyword to your variables so that you don't create a global variable:
var inputted = document.getElementsByTagName("input")[0].value;
You should also not put closing </input> tag since it is self-closing tag:
<input type="text" name="firstname" />
By the way you can also get elements value using below syntax:
formName.elementName.value;
Or
document.forms['formName'].elementName.value;
In your case it would be:
var inputted = formName.firstname.value;
Or
var inputted = document.forms['formName'].firstname.value;
Replace formName with whatever name is of your <form> element.
Lastly you can also get element's value if you apply id to it:
<input type="text" name="firstname" id="firstname" />
and then use getElementById:
var inputted = document.getElementById('firstname');

var inputs=document.getElementsByTagName("input"),
i=inputs.length;
//
while(i--){
inputs[i].onclick=myClickEventHandler;
};
//
function myClickEventHandler(evt){
var myVal;
switch (this.name) {
case 'firstname':
myVal = this.value;
break;
};
};

If you are using a form, you could try something like this instead :
var input = document.forms["formName"]["fieldName"].value;
Else, make use of the .value attribute :
var input = document.getElementsByTagName("input")[0].value;