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.
Related
Is there a way to detect where in an input element's content a user has clicked? Specifically in Firefox?
I need to know not where the caret is but where the caret would be when the user clicks into an input element.
I am trying to fix a bug in firefox where the user cannot click to place the caret into an input element which has had '.select()' called on it -- the caret fails to appear in firefox, so I want to place it manually if possible.
Thanks!
You can get the pixel position of the user's click (relative to the input field) by reading the click event's offsetX and offsetY:
// get the click position:
document.getElementById('test').onclick = function(e) {
console.log(e.offsetX, e.offsetY)
};
// for testing the 'select' issue:
document.getElementById('btn').onclick = function() {
document.getElementById('test').select();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="test">xxxxxx</textarea>
<button id="btn">Select</button>
Converting that to the desired caret location is not easy, though, because it will depend on font sizes and the text content of the input field. The best I can think of would be to do something like the technique used in textarea-caret-position, except iterating through every possible caret position in the textarea to find the one closest to where the user clicked. Which is almost certainly overkill for the task you have in mind.
(For what it's worth, the current version of firefox (v57) does not seem to have any trouble placing the caret correctly whether the input field is selected or not. I'm not certain whether this was the case in previous versions.)
Found the root of the problem, some bad css had set text-select to auto on input elements. Changing it to text-select:text allowed the fix I used for Safari to work in Firefox as well.
The problem I have is with an input box not forgetting the first input it gets. It then feeds it back even when the content should have been over written by a new input. The code I am using works fine with IE8 the problem is seen with Firefox 20.0.
I am working entirely in Javascript. There is no HTML beyond a body.
I use this to set up my input box:
addElementWithIdButNoNode("input","manimp","div42"); // add input box
addElementWithNodeAndId("button","Set","div42","setButton"); //add "set" button
document.getElementById("setButton").onclick=showIt;
"manimp" is the ID and the below successfully captures what is entered first time around as "theMainVar".
function showIt()
{
theMainVar=manimp.value;
theMainVar=parseFloat(theMainVar);
alert(theMainVar);
}
The problem is that if you run this again in Firefox you can enter any value you like but the alert comes back with what you entered the first time around.
You can manually sent the "manimp.value" to something else in javascript and it does change but it then stays stuck at this changed value.
I need a "reset manimp so it can accept a new value from the input box function"
I have had a look around and found lots of "reset()" and "clear()" funcitons but nothing works for me.
The same thing happens if I swap the input box for a drop down.
I'm new to Javascript so if the fix seem obvious to you, maybe it is!
Try getting the 'manimp' element inside your function, probably the value is referenced when the function is declared. So, inside your function use
theMainVar = document.getElementById('manimp').value;
Given the following code:
sPosSelect="#fpJpos input[name=posnum" + iiPos + "]";
if (fIn>fPosMaxWtUse[iiPos]) {
alert(sprintf('%.0f is %.0f more than the position max of %.0f.',fIn,fIn-fPosMaxWtUse[iiPos],fPosMaxWtUse[iiPos]));
$(sPosSelect).val('');
$(sPosSelect).focus();
return;
}
It works in that I get the alert, and the field is blanked. However, the focus then moves on to the next field when what I want is for it to stay on the field just blanked so the user can try again.
All suggestions are welcome, including anything I'm doing that could be done in a better way.
Terry
I assume your code is within an event attached to the field in question, presumably on blur?
If this is the case, you should simply use return false at the end of the function. This will tell the browser to ignore it's default behaviour, which in this case would be moving to the next field.
What your code is doing at the moment is setting focus in the field, and then returning control to the browser, which assumes everything went okay, and happily moves on to the next field.
Also, if this code is within an event attached to the field, you should really be using $(this) in place of repeating the selector $(sPosSelect).
Strange phenomenon detected with JQuery 1.4.4 for FireF, Chrome, Safari (IE untestested).
Aim: update a list while the user types a filter value into a simple, basic text-input-box.
Solution: bound keyup event, read out the value of the input-field, apply the filter... roughly:
$("#myinputfield").keyup(function(e) { myList.filter($(this).val()) });
it works perfectly for both typing and deleting EXCEPT for when deleting (del or backspace same effect) the last remaining (==first) char. in that case the event does not fire at all.
Anybody with an idea on what the problem is and/or how to solve it?
(p.s.: My solution would be to change from keyup event binding to a setTimeout periodical check as long as the input-field has focus, but that koxind of feels like a dirty escape...)
I cannot reproduce your problem. Perhaps it is just that your filter function does not handle $(this).val() == '' very well. Check out this quick test.
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!