I have form with lot's of date input fields. I would only like to select firs two characters of date (e.g. day portion of the date only) when focusing on a input field. I have accomplished this with this code:
$(".date").focus(function() {
this.setSelectionRange(0, 2);
});
The problem is this only works if I focus on input field with a mouse click. But if moving between input fields with TABULAR key on keyboard then the entire text in input field is selected. Can this be controlled via JavaScript as well?
Here is also JSFiddle which demonstrates above.
It sounds like the default handler is being run after yours.
Prevent this by stopping the browser's default handler by running:
$(".date").focus(function(e) {
e.preventDefault();
this.setSelectionRange(0, 2);
});
i posted here an answer, which is related to what you want , check it out: how-to-select-particular-text-in-textbox
Related
I've encountered a user interface issue with validation I really want to solve. For the website: http://fun-booths.co.uk/dev/
I'm using this simple plugin for validation: http://www.formvalidator.net/
The simple code behind this is as follows:
$.validate({
form : '#fscf_form1, #fscf_form2',
validateOnBlur : true,
scrollToTopOnError : false
});
The validateOnBlur property makes sure validation occurs when inputs loose focus.
There is a form in the right hand sidebar. When selecting a date and time the validation is not functioning correctly.
Fill out the town/city and postcode fields with the correct test data format for example. You will notice a green tick dynamically appear. Now for the date and time fields an end user does not actually type, the input is given to the form field by clicking on the responsive time picker / date picker respectively.
After selecting a date and time and focusing on other input elements this results in the following issue (even though a value has been selected a red cross is presented in the form field which is not desired behaviour.):
I believe this issue is stemming from the fact that the user does not actually enter text into the time or date fields. So the validation does not detect that actual text has been entered into the form.
Note: A strange behaviour is that a green tick does appear on the date/time fields if a value is chosen, then the same input is selected/given focus again.
Is there a JavaScript/jQuery solution that could fire with an event listener to solve this issue and ensure a green tick appears? Or would textual input need to physically be typed in to the date/time fields.
Try this hack, should work :
$('.picker__input').on('change', function(){
$(this).focus();
})
Hope this helps.
You are doing two plugins to work together. Try to give a callback to pickadate asking to reprocess the field:
$('#fscf_field2_12').pickadate({
//... add this parameter
onClose: function() {
$('#fscf_field2_12').blur();
},
//... or this one
onSet: function() {
$('#fscf_field2_12').blur()
}
})
You can also check the validateOnEvent method from jQuery-Form-Validator.
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!
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>
I'm trying to update a span tag on the fly with data from an input text field. Basically I have a text field and I'd like to be able to grab the user's input as they type it and show it to them in a span tag below the field.
Code:
<input id="profileurl" type="text">
<p class="url">http://www.randomsite.com/<span id="url-displayname">username</span></p>
JQuery:
var username;
$('#profileurl').keyup(function(username);
$("#url-displayname").html(username);
See it in JS Fiddle: http://jsfiddle.net/pQ3j9/
I'm guessing the keyup function is not the best way to do this. Since checking the key wouldn't be able to grab prefilled or pasted form input.
Ideally there is some magical jQuery function that can just output whatever info is in the box whenever it detects a key up but if that method exists I haven't found it yet.
EDIT: You guys are fricken amazing. It looks like .val() is that magic method.
Second question: How would you restrict input? Looking at the modified jsfiddle's, when a user inputs an html tag like < hr > the browser interprets it and breaks the form. Do you specify an array and then check against that? Does jquery have anything like PHP's strip_tags function?
$('#profileurl').keyup(function(e) {
$("#url-displayname").html($(this).val());
}).keypress(function(e) {
return /[a-z0-9.-]/i.test(String.fromCharCode(e.which));
});
check out the modified jsfiddle:
http://jsfiddle.net/roberkules/pQ3j9/5/
Update: As #GregL points out, keyup indeed is better, (otherwise e.g. backspaces are not handled at all).
Similar to roberkules' answer, but using keyup() like you proposed seems to work better for me in a Chrome-based browser:
$('#profileurl').keyup(function(e) {
$("#url-displayname").html($(this).val());
});
Updated jsFiddle: http://jsfiddle.net/pQ3j9/3/
For the second question, if you wish to maintain characters and not have them parsed as html entities then you should do this instead :
$('#profileurl').keyup(function(key) {
$("#url-displayname").text($(this).val());
});
Check it out at - http://jsfiddle.net/dhruvasagar/pQ3j9/6/
You can bind multiple events with bind
http://jsfiddle.net/dwick/DszV9/
I have an html with few tabs. In all of tabs there's an input type=text. If i type something in the input on tab1, how can it be typed to the rest of the inputs in the other tabs too?
I would guess its something similar here in stackoverflow when you ask a question and you get a preview box underneath but instead that would be an input too.
If input id's are input1, input2 and input3 can someone show me a quick way if possible?
Thanks alot
I would use a class on the inputs
$('.group_input1').change(function(){
$('.group_input1').val(this.value);
});
$('#input1').blur(function() { $('#input2,#input3').val(this.value); });
Here's a working demo: http://jsfiddle.net/Ender/C5L7W/
I've chosen blur as the update event, because this event must occur when switching tabs (as the source textbox will lose focus), and it involves the fewest updates to other inputs compared to using something like keyup, keydown, or keypress.
$('#input1').blur(function(){
if ($('#input1').val() != '')}
$('#input2').val($('#input1').val());
$('#input3').val($('#input1').val());
}
});
Something like that should work... but you might have to check if input on tab 2 was filled in first.. If that is the case then we can rework this code.