Detecting and clearing a form field in Chrome - javascript

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>

Related

Setting an empty value for a text input

I have the following JS :
document.getElementById('sketchpad-post').setAttribute('value','')
The HTML input is as follow:
<input type="text" id="sketchpad-post" autocomplete="off" value="" placeholder="Message"/>
If the second argument of the setAttribute function is an empty string, like in the example above, it doesn’t work : it doesn’t empty the text field (the text field has a previously set value).
Now if the second argument is a non-empty string, then, it works : it sets my text field to the provided value.
I find this behavior particulary strange…
I tried to enforce autocomplete="off" (and even autocomplete="flu") doing a setAttribute and also to do a removeAttribute('value') but I still cannot manage to have this field blank when the user display it.
As a workaround I can set the value to a kind of placeholder like '…' or whatever other character (an non-breakable space maybe?) but it’s not very nice.
I have this behavior in both latest Chrome (Chromium) and Firefox.
Any idea ?
document.getElementById('sketchpad-post').value = "";

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.

Placeholder text is returned when using value property of input text box in form

I am using webshim to provide the html5 placeholder functionality in my textboxes in IE8.
This works fine when I submit the form - the field is blank if the user has not entered anything.
But when I tried to jazz things up by making an ajax request hooked to an onclick event the following line of code returns the placeholder text instead of an empty string.
document.getElementById('idOfTextBox').value
How can I avoid this behavior?
You could set this as alternative
if ( document.getElementById('idOfTextBox').value=='placeholder' ) {
document.getElementById('idOfTextBox').value='';
}
basically, if the textbox value = the placeholder, it will set the value to '' (empty string)
V31, that was super quick! You are correct, jquery gets it right.
$('#idOfTextBox').val()
gives the correct result
Since the placeholder fix puts the value in the textbox and change the style to appear as a placeholder, you need to fix it before submitting it. Please find the code in jquery below:
$('form').submit(function() {
$(this).find('.hasPlaceholder').each(function() {
$(this).val('');
});
});
Do not that in the textboxes where you want to remove the placeholder have the class 'hasPlaceHolder' so that it can find them
As per OP the jquery selector worked
$('#idOfTextBox').val()

Making a text field uneditable and not just readonly

When i click on a textfield, i get a dropdown so the user could select a value from the list.
After the user selects the date from the dropdown, he/she could edit the date by even adding characters to it. So i want to find a way to prevent this. I thought of making the field un-editable. So i used readonly but, this prevents the user from clicking and displaying the list. So can someone tell me how can i make the field uneditable.
<input id="datePiccc" type="text" class="dates" />
You can use the below code. This will make the text input field clickable but when the user types in anything, nothing would happen.
document.getElementById('datePiccc').onkeydown = function(e){
e.preventDefault();
}
Fiddle Demo
As pointed out by nnnnnn, onkeydown is a better option than onkeypress as it would stop the delete and backspace key functions.
You could add the below also to your code to nullify Cut and Paste events1. (Note: Not doing anything for Copy as that operation isn't going to change the value of the text field).
document.getElementById('datePiccc').oncut = function(e){
e.preventDefault();
}
document.getElementById('datePiccc').onpaste = function(e){
e.preventDefault();
}
1 I think these should work in all browsers. Currently tested in Chrome 31, Opera 15, IE10 and FireFox 24. (Note: In IE10, there is an x mark which appears on the right side of the input field which when clicked clears the entire field value. Could not find a way around this.)
I'm assuming the text field is being set in javascript. If so, you can use the following line to disable the field:
document.getElementById('datePiccc').disabled=true;
The input will remain as it is and the value from the selection field can also be set.
Disable the input in JQuery as
$("#datePiccc").attr("disabled", true);
And in pure JS
document.getElementById('datePiccc').disabled = true;
May be this can help!

How to clear HTML input textbox via Javascript

I am using the same input textbox to collect multiple values.
After collecting the first input, I will clear the field by calling
document.getElementById("textbox").value= "";
On the surface, above snippet appears to clear the textbox.
But when I blur the textbox by clicking elsewhere, the old value reappears.
MORE CODES >>>
My HTML >>
<input id="textbox" placeholder="Start">
Javascript >>
After getting the first input, I like to reset the input value >>>
document.getElementById("textbox").value= "";
document.getElementById("textbox").setAttribute("placeholder","End");
This is how I do my data collection >>>
The same textbox is first used to collect a Google "place", and then subsequently to collect some user entered comment. In addition to collecting the data, someFunction() also try to clear the textbox by calling .value= ""
google.maps.event.addListener(textbox, "place_changed", function() {
someFunction();
});
Here is something i found googling fast for an answer; i think you can play around indeed with onFocus() a bit:
<input type="text" value="Click here to clear text" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
It may require a bit of usage of onBlur as well.
Also some other pointer, to get you going with jQuery if you want.
Looks like your input's value is stored in separate variable to be used for some other actions. So you should maybe check your code and clear thar variable.
I have practically implemented and used this solution whch is already suggested by my friend above:
document.getElementById("textbox").setAttribute("placeholder","End");
So, this works for me pretty well.(context:"placeholder" attribute used)
ICDT
..tc:)

Categories

Resources