We Keep Coding

How to add new value on keyup to div every n digit with jquery?

I want to auto list numbers every time the user types in 3 digits. The input numbers should appear in the div automatically.
$("#lister").on("keyup", function() {
var mxlen = $(this).data("mxlen");
var input = $(this).val();
if (input.length == mxlen) { //if input==3
$('#num_list').append('<li>' + input + '</li>');
$(this).html(''); //clear input after appended
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="num_list"></div>
<input type="number" id="lister" data-mxlen="3" />
The problem with my code is that it repeats the same numbers and does not clear the input after appending.

Your code is almost there, you just need to use val('') to reset the value.
Also note that you can make the logic more robust by using slice(0, mxlen) to restrict the value to 3 characters when typing quickly, and also change the check from == to >= for the same reason.
$("#lister").on("input", function() {
let $el = $(this);
var mxlen = $el.data("mxlen");
var input = $el.val();
if (input.length >= mxlen) {
$('#num_list').append('<li>' + input.slice(0, mxlen) + '</li>');
$el.val('');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="num_list"></div>
<input type="number" id="lister" data-mxlen="3" />
One last thing to note is that characters such as - or e are valid for entry in a type="number" input field, however they are not valid for the value returned from the field. As such the length check will get inconsistent output when these characters are used.
Depending on your use case you may be better off with a standard type="text" check and manually restricting the input to numerical values.

JavaScript regular expression mobile phone number format

1.XXX-XXX-XXXX
2.XXXXXXXXXX
I would like to know the regular expression of the format.
Modifying the existing sources will yield results.
var regExp = /^01([016789]?)-([0-9]{3})-([0-9]{4})$/;
var regExp = /^01([016789]?)[0-9]{3}[0-9]{4}$/;
A statement to check the condition.
I wonder if the contact form is also correct.
var test is a text field that receives input.
if(!regExp.text) {
alert(""phone number format is not valid.");
document.getElementById('phone').focus();
return ;
}

I'm not quite sure what you are trying to achieve, but maybe this example helps:
https://jsfiddle.net/xu9fcbxt/
Notice: jQuery required
Code:
JS:
$(document).ready(function(){
var regExp = /^01[5-7][1-9]-[0-9]{3}-[0-9]{4}/;
$('#phone').focusout(function(){
var text = $('#phone').val();
if(!regExp.test(text)){
alert('not a valid phone number');
}
});
});
HTML:
<input id="phone" type="text" />
This would check if the number has a format like 0151-123-4567

Textbox should allow only Hexa decimal values

I have a textbox and i can enter only 2 digits. What i want is that user can only input Hexa values in it like 12,a0,0a (2 digits) if user enters any ather value , it will not be entered. Can you please help.
<input onkeyup=validateHexa(this); class='nbb' maxlength='2' value='??'/>
function validateHexa(ele){
var control = ele.value;
var regExp = new RegExp(/^([A-Fa-f0-9]{2}){8,9}$/);
if (!regExp.test(control))
ele.value="true";
}

You can do something like this:
function replaceInput(ele) {
var re = /[^A-Fa-f0-9]/g;
ele.value = ele.value.replace(re, '');
}
<input onkeyup=replaceInput(this); class='nbb' maxlength='2' placeholder='??' pattern="[A-Fa-f0-9]{2}"/>
JSFiddle

hello there you should try Regular expression like ([aA-hH 0-9]{2})
please comment if any issue :)

How do I turn a textbox into a date or currency textbox using only JavaScript (jQuery)?

I am trying to build a form using only JavaScript and jQuery. For one of the textboxes, I need to make it display as a date. And another as American Currency.
I have seen a few really cool forms before where it already has the " / /" symbols in there, and as you type the date, it falls perfectly into the symbols so you don't have to type them. Also, I need it to display as a date in the same format (mm/dd/yyyy) when a button is clicked. In addition, somehow, I need it where if no dates were entered, it displays nothing when the button is pushed.
EDIT:
Okay, so, after looking around online, I found a better way to describe what I am looking for for the date. It is exactly the same as the HTML5
<input type="date">
However, after clicking the button, I need it to display as MM/DD/YYYY and the HTML5 only allows YYYY-MM-DD which is NOT what I want.
So, how do I build a single textbox that has the same functions (I don't need the date picker) as the HTML5 "date", but with the display formate as MM/DD/YYYY after a button is clicked?

This sort of input is not trivial. There's some finesse that you'll need to do. First the HTML:
<div id="dateInput">
<input type="number" placeholder="MM" maxlength="2"/>/<input type="number" placeholder="DD" maxlength="2"/>/<input type="number" placeholder="YYYY" maxlength="4"/>
</div>
<div id="moneyInput">
$<input type="number"/>
</div>
Now basic CSS, we'll remove the borders from the inputs and instead add them to the containers:
input{
border:none;
background:transparent;
}
div{
border:1px solid #e0e0e0;
}
Here's the hardest part, the Javascript/jQuery. The money one should work natively but the date one will take some work.
$('#dateInput').on('input', function(){
//get max length of the input
var maxLength = parseInt($(this).attr('maxlength'));
//get the current value of the input
var currentValue = $(this).val();
//if the current value is equal to the maxlength
if(maxLength == currentValue.length){
//move to next field
$(this).next().focus();
};
});
On button press gather all the values from the inputs and display
$('button').on('click', function(e){
e.preventDefault();
//set the variable to append ti
var dateDisplay = '';
//iterate over the inputs
$('#dateInput input').each(function(){
//if dateDisplay exists (will explain soon)
if(dateDisplay && $(this).val() != ''){
//append the value
dateDisplay += $(this).val() + '/';
} else {
//if the value is blank, make the variable false.
dateDisplay = false;
};
});
//now check the variable
if(dateDisplay){
//if it's all good, remove the last character (/) and display
alert(dateDisplay.slice(0,-1));
}
return false;
});
This doesn't check for validity, just handles the general UX.

I was browsing online and in other forums, and found this answer:
$('#date').keyup(function(){
if ($(this).val().length == 2){
$(this).val($(this).val() + "/");
}
else if ($(this).val().length == 5){
$(this).val($(this).val() + "/");
}
});

How can I truncate the contents of a textarea using JavaScript?

I have a text field, I am using onkeypress to check the length of the entered string. If it exceeds n number of characters it will return false and it will not accept any other character, But Here I am unable to remove the characters I don't want in thetext field. How can I remove the text here.

Try this, if you are using textarea
<textarea onkeypress="return limitlength(this, 20)" style="width: 300px; height: 90px"></textarea>
function limitlength(obj, length){
var maxlength=length
if (obj.value.length>maxlength)
obj.value=obj.value.substring(0, maxlength)
}

Use simple HTML5, no need javascript:
<input type="text" maxlength="5"/>
MDN

Check the length of the entered text in Onkeyup event. If it is greter than n then use substring to truncate first n characters and then set the new string as the value
$("#mytxt").onkeyup(function(){
var Currentlength =$(this).val().length;
var CurrentVal = $(this).val();
if(Currentlength > n)
{
$(this).val(CurrentVal.substring(0,n));
return false;
}
});