I'm trying to have the default behavior of a form select (or highlight) the text when you tab to the next input. I've had to add the .select() function on my password form fields for this to work in IE8. Is there an equivalent to the jquery .select() for deselecting text?
$("#MyTextBox").focus(function() {
$(this).select();
});
$("#MyTextBox").blur(function() {
// Deselect here
});
Not that I am aware, however this ought to work for you:
$(this).val($(this).val());
Here you set the value of the field to itself. the cursor should automatically be put on the end.
The posted answer by James Wiseman worked perfectly in IE8, but for me at least, didn't work in Firefox 3.6.x.
I appreciate that the original question is specific to IE8, however, to help out those searching for a single solution that works in FF and IE, I used the following code:
var temptext = $(textbox).val();
$(textbox).val('');
$(textbox).val(temptext);
(where textbox is the textbox object to work with).
It uses the same theory as James Wiseman's solution, however, it adds the specific step of setting the textbox's text to a blank string prior to setting the textbox text back to the original string. Hope this helps!
Related
I'm having an issue in IE 8 where I'm trying to store a value from a form field select box using jQuery's val(). The String shows up fine in all browsers except IE 7/8 where it shows up as null. I'm assuming it has to do with the characters (quotes?) in the field, but I'm not sure how to work around this. Code below:
var $size = $("#size");
var size = $size.find('option:selected').val(),
The actual value of the selected field is:
L: 158.375" x 80.5" 4023mm x 2045mm
Thanks in advance for any help.
Assuming that #size is the id of the select box, why are you using find('option:selected')? Whatever the currently selected option is will be the val() of the select element.
e.g. $('select#size').val(); should return the value of the selected option.
Thanks all for the feedback. It appears it was a bug with an older version of jQuery (1.4.1). I've updated to 1.7.2 and it works correctly now.
So I've been trying to get this script working in IE 7 & 8. The lack of support for getElementsByClassName was difficult to say the least, but i have filled support for that with a jQuery library.
My issue here is that the code shows no errors in any browser, yet the code does not run properly in IE. I've tested this in FF, Chrome, and Safari. All other browsers work fine, excluding IE.
I know semantics wise the code could be smaller (Trust me when get it working i will fix that.) But for now i need to figure out what is holding up IE.
jQuery(document).ready(function() {
var forms = jQuery('.form_item');
var firstFader = forms[4].getElementsByTagName('input');
var secondFader = forms[6].getElementsByTagName('input');
jQuery(firstFader[0]).click(function() {
jQuery('#nearSighted').hide('slow');
jQuery('#farSighted').show('slow');
jQuery('#astigmatism').hide('slow');
});
jQuery(firstFader[1]).click(function() {
jQuery('#nearSighted').show('slow');
jQuery('#farSighted').hide('slow');
jQuery('#astigmatism').hide('slow');
});
jQuery(firstFader[2]).click(function() {
jQuery('#nearSighted').hide('slow');
jQuery('#farSighted').hide('slow');
jQuery('#astigmatism').show('slow');
});
jQuery(secondFader[2]).click(function() {
jQuery('#presbyopia').show('slow');
jQuery('#cataracts').hide('slow');
});
jQuery(secondFader[3]).click(function() {
jQuery('#presbyopia').hide('slow');
jQuery('#cataracts').show('slow');
});
});
What this code does is take an array of all form items, then breaks two specific ones down into their individual input elements, when one of the elements is clicked it hides or shows a div that contains information about that specific condition. Any ideas?
Your click handlers aren't being called because your <input>s are styled display:none, i.e. they're hidden. Modern browsers are lenient because they see a <label for="id"> so they fire the click event as though it were the input itself (see http://jsfiddle.net/MMUyA/).
var firstFader = forms[4].getElementsByTagName('input')[0];
var secondFader = forms[6].getElementsByTagName('input')[0];
I see you're not actually clicking the input elements, but the label elements for those inputs.
It seems IE doesn't properly propagate the click event to the hidden input, therefor your .click() event never gets executed.
See also: IE - hidden radio button not checked when the corresponding label is clicked
The simple solution would to not bind the click() events to the input but to the label instead.
It looks to me like in IE7, the radio button input object has zero size and the label for it is what actually receives the click and displays the radio button. Perhaps you need to intercept clicks on the associated label in addition to the input field.
I would like to get the updated DOM html string for the form elements (e.g. <input type="text">, <input type="radio">, <input type="radio">, <textarea>).
I found this question and I am trying to use the formhtml plugin written by gnarf:
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
The problem is that it works in Firefox and Chrome but only works partially in IE8 (I have not tested other versions).
If you open the following page in IE8, you can see there is a text box, some checkboxes and radios. Try entering some text and check the checkboxes and radios.
http://jsfiddle.net/e9j6j/1/
Then click on the 'Click' button.
You can see that no matter I am retrieving the html string through the innerHTML property of a native DOM object or by using the formhtml() function of the plugin. The html returned only reflects the changes in the value attribute of the textbox, you can never see the checked="checked" attributes in <input type="radio"> and <input type="checkbox"> even you have already checked them before clicking the button.
Why is this happening, and how I can make it work in IE?
Thanks in advance.
EDIT:
I am sorry. I made some mistakes in my question, now it has been rewritten.
EDIT:
The sample codes were created to demonstrate my problem but I made some mistakes. Both IE7 and IE8 do give expected results (I also did the tests again).
In my original codes, I do not directly use formhtml() function on the $('#div1') but rather clone it before using formhtml() like this:
alert($('#div1').clone().formhtml());
And on IE8 with jQuery 1.3.2, the returned html does not reflect the checked states of those checkboxes and radios, I never thought it would be the problem of the clone() function that's why when I created the sample codes, I did not clone it and so the actual problem failed to be demonstrated.
The updated sample codes are here (with jQuery version changed to 1.3.2):
http://jsfiddle.net/e9j6j/4/
This may show the problem of the clone() function on IE8 (I don't have IE8 right now, I will test it when I am home, I will report later).
EDIT:
I have just did the test. It's really the problem of clone() function in jQuery 1.3.2 on IE8. It fails to copy the states of checkboxes and radios. After changing it to jQuery 1.5.1. It works perfectly.
I tried the test case at http://jsfiddle.net/e9j6j/1/ on IE8 and IE7 and they worked for me.
Steps to replicate problem:
Load http://jsfiddle.net/e9j6j/1/ in IE browser.
Enter text in the text field, check first radio button, check first checkbox.
Press 'Click' button.
Expected result:
Both alerts show value on text field and 'checked' state on first radio & first checkbox.
Actual result:
As expected. However, bear in mind that IE's representation of the DOM means that checked="checked" is actually reported as CHECKED but it is correct.
UPDATED:
Added a test to ensure that the checked state can be copied to a new dom node:
$('#btn1').click(function() {
alert($('#div1').formhtml());
alert(document.getElementById('div1').innerHTML);
var div1 = $('#div1');
div1.clone().insertAfter(div1);
});
This creates another set of fields which retain the original input state.
View on jsfiddle.
I have a fixed width input of type text. If the user was to enter a long value into this field I would like the beginning of the value to be shown when the input no longer has focus.
Default behaviour in FF and IE leaves the view of the field value in the same state. Chrome on the other hand seems to behave as I want, it shows the beginning of the value.
I have tried to reset the caret position in IE through the textRange object's Select() method but this seems to re-invoke the blur event resulting in recursive chain (not sure why, but that's a separate issue).
Does anyone have any suggestions? There must be an easy way to do this?
I rigged this code together, it works on IE8. The setTimeout of 1ms is because IE automatically shows the second value if a textbox's value is set twice in a row(surprising):
function resetPosition(element){
var v = element.value;
element.value="";
setTimeout(function(){element.value = v;},1);
}
Also tested on IE7, and unobtrusive on Chrome(which does it automatically).
You can call
element.setSelectionRange(0, 0) to set the position.
I have the following problem. In text input filed which work as an auto-completer some of suggestions it returns are wither than it. The problem comes when you leave the field. In IE the text cursor is positioned on the end of the suggested string, so you can actually see only the last part of it. So I used the code bellow to fix this and it works under IE6, but in IE8 this doesn't work, the field is always selected and I can not select anything on the page.
My question is what is the right way to move the cursor in the beginning of input field, after I leave it?
$('#myAutocompleter').blur(function(){
textRange = this.createTextRange();
textRange.collapse(true);
textRange.select();
});
(The used code is written in jQuery.)
I believe what you're looking for are the .moveStart and .moveEnd methods of the text range:
$('#myAutocompleter').blur(function(){
textRange = this.createTextRange();
textRange.collapse(true);
textRange.moveEnd('character',0);
textRange.moveStart('character',0);
textRange.select();
});
(Tested functional in IE8)
I'm not sure I understand your question, but IE has it's own set of methods for handling text selection on a page, so that would be why it behaves differently.
Look here for a tutorial:
http://www.quirksmode.org/dom/range_intro.html
And here for compatability:
http://www.quirksmode.org/dom/w3c_range.html
If that's not your problem, try doing a mouseup or click event check inside blur and putting the selection code there? Maybe that'll cause the selection to move away from the input field before placing it where the selection is.
I had a similar situation where I wanted to see the top/bottom of something depending upon things like this.
I used the jQuery scrollTo plugin
).scrollTo('100%')
).scrollTo('0%')
EDIT 1:
I am using it on this field:
<textarea cols="57" rows="2" class="cssTextarea cptEntryArea"></textarea>
with this code:
$(".cptEntryArea").change(function()
{
$(this).scrollTo('0%');
});