We Keep Coding

How do I prevent commas in a number input in IE

A number input on Chrome
<input type="number" />
Does not allow commas, only numeric,"e", and "."
However, on IE11 the number input does allow commas (2,000)
Is there an HTML way to normalize this behavior across number inputs? Should I not use the number input? How do I account properly for regions?
Looking for either an HTML or JS solution
Thanks!

This is another IE issue.
As far as I know, the only way to fix this is using JS:
input.addEventListener("input", function () {
input.value = input.value.replace(/,/g, ".");
});
Note that in most regions, a comma is used as a decimal separator.

Applying mask for an input field for date in jquery

I am using jquery.meio.mask to format a date in a textbox which is having datepicker attached to it. Everything is working fine except that when the user manually enters a date after he enters the 3rd digit (after the first /) the cursor is coming infront of the 3rd digit and when he enters the 4th digit it is replacing the 3rd digit he entered which results in missing one digit every time. I am setting the mask to the text field using the below code,
$('#txtFrom,#txtTo' ).focus(function() {
$( this ).setMask({
mask : '19/39/2999'
});
});
I am new to Jquery. Could some one help me how to solve this.

Try To implement This way:
$(document).ready(function(){
dateMask($('#txtFrom'));
dateMask($('#txtTo'));
});
function dateMask(element)
{
$( element ).setMask({
mask : '19/39/2999'
});
}

Regular Expression - +/- sign and decimal

I am trying to create a regular expression for decimal number and at the same time "-" or "+" sign to be optional at the start.
There are a lot of information about this, so I finished with this:
/^[+-]?\d+(\.\d+)?$/
So, I have tested this in the console using the test() function and it is working perfectly.
My question is more about where to do this check:
if the check is on keypress event I am able to use preventDefault() in order to "consume" the incorrect symbols but I am retrieving the text like this and have no access to the last entered symbol - $(event.target).val()
if the check is on keyup event I have access to the whole text, but I am not able to remove the incorrect symbol, because I do not know which is it, and where it was put in (using the mouse it can be put in the start or in the middle of a valid string)
I need to check combination of symbols, not validate the symbols only. For example:
- //invalid
- 1 //valid
1. //invalid
1.2 //valid
So, I guess I should the check when the whole sting is entered, but then, how two remove the incorrect characters? Removing the whole string on when it is invalid does not look right.

The below is one possible way to tell the user if there is anything wrong with their input as they keep entering. Click here for a sample demo.
In addition, we can also add a <div> listing the allowed characters/format. This in addition to letting the user know that there is something wrong, will also tell them what forms a valid input.
HTML:
<input id='ip' type='text'/>
JS:
var regex = new RegExp(/^[+-]?\s*\d+(\.\d+)?$/);
document.getElementById('ip').onkeyup = function(){
var inputVal = this.value;
if(!(regex.test(inputVal))) this.className='err';
else this.className='noerr';
}
CSS:
.noerr{
color: green;
}
.err{
color: red;
}
Note: HTML5 has inbuilt ways to validate input and also has pseudo-classes like :invalid and :valid to do the same as what the above example does. If you can use HTML5, try this sample. The second input field is done using HTML5 (no JS required).
HTML5:
<input id='iphtml5' pattern='[+-]?\s*\d+(\.\d+)?' type='text' />
CSS:
#iphtml5:valid{
color: green;
}
#iphtml5:invalid{
color: red;
}

How to restrict the text field to enter only digits

I am trying to create a text field for entering dates that accepts only digits. If any one enter any other character, no need to display in the text field and the cursor need to remain in the same position(no need to move to the next character position). If the entered value is a number , then need to show in the text field and need to move the cursor to the next level.
So at last the text field contains only the numbers.
I am using the following code,
$("#date").keyup(function(event){
//var c=(event).keyCode;
var c= String.fromCharCode(event.keyCode);
var cval = $(this).val();
alert("Characters="+c);
if(isNumber(c))
$(this).val(cval+c);
}
Advanced Thanks,
VSoft

In HTML5 you can use input type as number.
You can do this:
$('#date').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
I think you need jQuery Input Mask Plugin

you should run your function only when Focus is on the requested text field

new separator for textarea in html

I'm trying to give the user ability to create customized list for my application,by insert his choices in text area field ,each line is treated as one choice using the \n (enter) as separator , i need to allow user to enter one choice in multiple lines,any one can help?
<textarea></textarea>
user enter :
aa
bb
cc
with enter in textarea, and then I'm processing them to split them at enter separator ,so i have three option in list :1-aa ,2-bb,and 3-cc ,but what i need to make aa ,bb is the first option, and cc second option ,i need new separator, i need more ideas?

I think you're saying that you need the user to enter listable items in a textarea and need to support the ability to present a single option across multiple lines.
As you've seen, using a single newline as the item separator does not work - you can't differentiate between two items on one line each and a single item presented on two lines.
Use two newlines instead of one as the item separator.
Example input:
Item One
Item Two line 1
Item Two line 2
Item Three

You can use whatever separator you like. For example an empty line (as when separating chapters), or a comma or semicolon. Any character (or sequence of characters) that is not part of the text to be entered.
Just remember to tell the user what to use as a separator.

This code will allow for the options to be entered on multiple lines and the options are created once you press Enter twice:
JavaScript
<script type="text/javascript">
var LastKeyCode=-1;
function updateOptions(e) {
if (e.keyCode) {
var KeyCode=e.keyCode;
} else {
var KeyCode=e.charCode;
}
if (KeyCode==13 && LastKeyCode==13) { // Enter?
var RowsDataAry=document.getElementById('inputfield').value.replace(/\r\n/g,"\n").split(/\n{2,}/g); // Fix IE CRs and split the textarea input
document.getElementById('choices').options.length=0; // Empty select
for (RowID in RowsDataAry) {
var TextVal=RowsDataAry[RowID].replace(/\n/g,", ").replace(/, $/,""); // Set commas and remove the last comma
document.getElementById('choices').options.length++;
document.getElementById('choices').options[RowID].value=RowID; // Add option value
document.getElementById('choices').options[RowID].text=TextVal;
; // Add option text
}
}
LastKeyCode=KeyCode;
}
</script>
HTML
<select id="choices" size="20"></select>
<textarea id="inputfield" onkeypress="updateOptions(event)" cols="40" rows="20"></textarea>
Tested in Firefox 3.6.3, Opera 10.53, IE 8 and Iron 5.0.380 .