Develop Reference

Preventing users from entering non-digits in input text field with HTML5

I have an input field of type text. Users should only be allowed to enter digits in the field. If they attempt to enter a non-digit, like a character, it should be ignored and not display in the field ( and not submitted to the server). I thought I could achieve this with the HTML5 pattern attribute:
<input class="form-control" data-remote="true" data-url="/contacts" data-method="put" pattern="^[0-9]*$" type="text" value="123456" name="contact[phone]" id="contact_phone">
But it doesn't work as expected. I can still enter any character into the field. There is no form submit button here. As soon as they tab out of field, the ajax call is made.
How can I achieve what I want with html5?

So you can totally do that by adding type="number" to your input field, It'll work in most browsers.
I'd recommend using sort of regex and a bit of JS to evaluate the input and then replace the input with permitted characters.
var phone_input = document.getElementById('contact_phone');
function validDigits(n){
return n.replace(/[^0-9]+/g, '');
}
phone_input.addEventListener('keyup', function(){
var field = phone_input.value;
phone_input.value = validDigits(field);
});
Here's a quick codepen
I'd also put a bit of validation on the model, just in case someone bypasses the JS.

I think it won't work with plain html5 since the pattern goes into affect after you submitted the form (It will make validation fail). But since you are already using js, you can just do it with for example the jQuery.keypress() function.

How can I change this input's value?

I want to change the input of a text field that stores the subject line in the Outlook Web App using JavaScript:
This subject text field is defined as:
<input tabindex="0" class="_f_ql _f_rl textbox allowTextSelection placeholderText" role="textbox" aria-labelledby="MailCompose.SubjectWellLabel" autoid="_f_B2">
I have tried the following using my JavaScript code:
textFieldElement.value = "Example";
textFieldElement.innerHTML = "Example";
textFieldElement.innerText = "Example";
These work to set the value as far as the user interface is concerned:
But they don't modify the "real" value of the subject that gets posted when you hit Send. Once you hit the Send button, the subject takes on no value (and shows up as (no subject) in an email). I can see from the POST request that unless I manually click on the element, focus it, and manually type in what I want it to display, physically with the keyboard, it won't send the subject argument in its JSON object.
How can I modify the "real" subject value that this control is expected to handle? I'm guessing this is an MVC control or some other type of ASP.NET control...and I am trying to modify the .aspx page, with JavaScript, to edit this value.
------------------------------------------------------------------------------------------------------------------------------------------------
Edit: I have only been able to set the subject line in one specific case. First, I need to physically click on the subject element. I've noticed this has a strange behavior of setting the class on this element from this:
<input class="_f_ql _f_rl textbox allowTextSelection placeholderText" autoid="_f_B2" role="textbox" tabindex="0" aria-labelledby="MailCompose.SubjectWellLabel">
To this:
<input class="_f_ql _f_rl textbox allowTextSelection" autoid="_f_B2" role="textbox" tabindex="0" aria-labelledby="MailCompose.SubjectWellLabel" maxlength="255">
Once it is in the non-placeholderText state with maxlength = "255", I am able to successfully change the innerText on it using textFieldElement.innerText = "Example";, and on submit, this gets sent correctly.
However, I cannot assume that the Subject element will ever be clicked, so I must work with the placeholderText version of the subject element first and somehow get it to reproduce this behavior where it goes into the other state. So far, I have tried the following without success:
Focusing the placeholderText subject element, then setting its innerText.
Changing the placeholderText subject element's attributes to match the non-placeholderText version of it, then setting its innerText.

http://msdn.microsoft.com/en-us/library/office/fp161027(v=office.1501401).aspx
Looks like you need to use
Office.context.mailbox.item.subject to set the subject. Outlook uses an API, so you need to use the API methods.

Placeholder vanish after click on Reset button in IE8

I have a form where an admin can add candidates. When I run my application in IE8, and click on reset button, it removes placeholder from all the fields. I am using placeholder.js to support placeholder property in IE8.
Here is my reset function ...
function resetCandidateData(){
$("#addCandidateForm")[0].reset();
}
My form is like that ....
<form name="addCandidateForm" id="addCandidateForm" method="Post">
<input type="text" name="cname" id="cname" class="inputBox bdr-radius5" placeholder="Enter candidate name" autocomplete="off"/>
.....
.....
<span class="global-button" onclick="resetCandidateData();">Reset</span>
</form>
First time when page refresh, it showing placeholder in each of my textfields in IE8 but after reset all are vanish. Please help.

I don't know anything about the specific placeholder.js library that you're using, and you didn't provide a link, so I can't even tell which one it is.
However, it sounds to me like you need to use a better placeholder script.
If resetting the fields clears the placeholders, then it means that the script is using the field value to display the placeholder.
This is fine, but does have some limitations, in particular as you've seen with resetting the fields, but it also means that you can't have placeholders on a password field (because they would show up as stars like the password itself), and you can't easily have the placeholder styled differently to the field values.
For all these reasons, I prefer a placeholder script that uses a different technique - eg putting the placeholder in its own element and displaying it on top of (or behind) the input field, rather than actually using the input field itself for the placeholder.
So therefore my advice is to find an alternative placeholder script. It should be fairly straightforward to take one out and plug another one in, and there are plenty of them out there to pick from. Take a look here for a list of some of the best ones.
Hope that helps.

Change your resetCandidateData function to
function resetCandidateData(){
$("#addCandidateForm")[0].reset();
$.Placeholder.init();
}
It should restore the placeholders.

Create an input field with a placeholder that gets written into upon text entry

I'm trying to create an input field for a phone number. I would like the placeholder to show the expected format/pattern: (XXX) XXX-XXXX as shown below.
Phone Number: <input type="text" name="phone" placeholder="(XXX) XXX-XXXX">
However, when the user starts entering numbers, I'd like them to simply replace the individual X's.
After inputting a few numbers the field would look like this (cursor after the 4)...
"(302) 4XX-XXXX"
And then the user entering backspace would simply replace the last number entered with an X again. After 2 backspaces...
"(30X) XXX-XXXX"
I've seen this behavior before in registration forms, but I haven't been able to locate any examples lately. I was hoping there might be a decent jquery plugin that accomplishes this, but I have not found it yet.

You can use a Mask, with jQuery:
jQuery(".maskPhone").mask("(999) 999-99999");
You can grab a plugin here: http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.js

The Masked Input Plugin will do what you want. http://digitalbush.com/projects/masked-input-plugin/

You may be able to use something like the Mask Input plugin in JQuery
http://digitalbush.com/projects/masked-input-plugin/
Or
http://digitalbush.com/projects/watermark-input-plugin/.

Detecting and clearing a form field in Chrome

I ran into a problem the other day when building a form.
The input box has a type "number".
In Chrome the input field displays up/down arrows. I could not detect change when either the up or down buttons were clicked, so I used CSS to remove the buttons. That was pretty simple, but it did not resolve all of my problems.
I do some validation on the field (using keyup). If I enter a number in the field it works fine, but if I enter a letter into the field I cannot detect it.
Using .val() works fine in FF and IE to get the field's value (number or letter), but in Chrome, not so much.
If there is a letter in the field I cannot find a way to clear the field either. Using .val('') simply moves the cursor to the left.
As I said, this problem is specific to using Chrome. For all other browsers my code works fine.
Any suggestions on code that can be used to resolve this problem?

The issue all revolves around the input being of type "number".
The HTML5 draft defines:
The value sanitization algorithm is as follows: If the value of the element is not a valid floating point number, then set it to the empty string instead.
http://www.w3.org/TR/html5/forms.html#number-state
Trying to do a .val() to retrieve a type=number input that has a non-number in it will only return the empty string. It looks like Chrome's implementation of this is to set the value of the field to empty string before any value can actually be retrieved.
As far as resetting the field using .val('') and keyup not being recognized, this code seems to work http://jsfiddle.net/hVVSA/2/
JS
var $input = $('input').keyup(function(){
console.log("here");
});
$('#clearfield').click(function(){
console.log('val was '+$input.val());
$input.val('');
});
HTML
<input type="number" />
<button id="clearfield">clear</button>