I want to set the cursor to the beginning of the textbox(<input/>) always.
I found following code below which does the job. However if there is a text in the textbox (<input/>)already, cursor is set at the end of the text first, then moved to the beginning. Which causes the jumping effect which is undesirable.
Is there a way to always set cursor to the begging without this jumping effect? Note I have function below called in onFocus onClick.
var range;
if (elem.createTextRange) {
range = elem.createTextRange();
range.move("character", 0);
range.select();
} else if (elem.selectionStart) {
elem.focus();
elem.setSelectionRange(0, 0);
}
An alternative instead of doing it all by yourself is following jQuery plugin:
http://code.google.com/p/rangyinputs
A nice Demo can be found here:
http://rangyinputs.googlecode.com/svn/trunk/demos/textinputs_jquery.html
Hope this brings some new light into your task, please understand that without a plunker / jsfiddle a perfect solution is out of my scope right now.
Update
Another way would be to use (if you are in html5 context) the attribute autofocus. But the behavior is, that it gets the focus when the DOM was rendered and all existing text is selected. Don't know if you can live with this.
<input type="text" value="some text here" autofocus />
Update2
http://plnkr.co/Wag8fb #OP: please fork & edit it, so it works like your code. Because I used all your code pasted here and its not working at all.
Related
I decided to use div with contenteditable instead of input. Here is a code, it's simple <div contenteditable="true"></div> So, and look at jsfiddle: http://jsfiddle.net/QkfKk/
Just for jsfiddle I've marked an area of first line. In Opera, I must click directly to marked area to focus the div. Also, I can focus by double click in any space over there. But, that click shouldn't be double. I hope I explain it right. In Chrome and any other browser, I can make just one click to any place in div to focus it. On marked area or on non-marked area, whatever. That's correct behaviour, I believe.
I've solved it. That solution has some defects but that's enough for me. When I click on non-marked area focus-event triggers anyway. So, I decided just set cursor position to the last possible position on trigger focus-event. Here's code:
var range = document.createRange();
var selection = getSelection();
var children = this.childNodes;
var last = children[children.length-1];
if (last.textContent.length) {
range.setStart(last,last.textContent.length);
} else {
range.setStart(this,0);
}
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
And this binds on focus, that's all. The solution is easy indeed but that works well.
fiddle: http://jsfiddle.net/QkfKk/7/
I know this is possible in javascript by using window.getSelection() method but I'm not familiar with this selection object.
Can you help me to write a code to make user's writing cursor to be always at the begining of the input string?
$('input[type="text"]')
.attr('maxlength','7')
.keyup(function(){
var sel = window.getSelection();
console.log(sel);
// need a code for here to make the cursor (caret) at the begining of the string
})
Can be done using a combo of:
dir = "rtl"
moving text box caret to 0 after every keypress
Demo: http://jsfiddle.net/FF9Tf/1/
Note: Uses hints/code from these answers.
Set cursor at a length of 14 onfocus of a textbox
define cursor position in form input field
you could always use CSS direction: rtl;
this line of code simply changes the direction of the text to Right To Left
and then u could just add the css class to your html elements using .addClass("your_class")
It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.
Edit: Try putting .addClass("your_class") outside the keyup function (although that might still not give you the best result you are looking for), check my comment below for a better way to do it.
Update: here is another way to do it
$('input[type="text"]').change(function () {
$(this).val() = $(this).split("").reverse().join("");
});
try this, it will keep the cursor blinking at the beginning of the text in the input box
$('input[type="text"]')
.attr('maxlength','7')
.attr('dir', "rtl")
.keyup(function(){
var sel = window.getSelection();
console.log(sel);
// need a code for here to make the cursor (caret) at the begining of the string
})
try the demo link
http://jsfiddle.net/hcWCQ/1/
in the eg: click on the input box and then press Shift+TAB and then start typing
not exactly what u r looking for.... but somewhere close
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%');
});
I'm working on implementing sprited buttons in Stackoverflow's beloved WMD markdown editor and I've run into an odd bug. On all versions of IE, the selected text is lost upon button clicks, so, say, highlighting a block of text and clicking the code button acts like you placed the cursor at the end of the selection and clicked the button.
e.g. highlighting this:
This
Is
Code
and clicking the code button give you:
This
Is
Code`enter code here`
What's really weird is that I left the original non-sprited button bar in and that works just fine. In fact ALL buttons and keyboard shortcuts code use the same doClick(button) function!
Old-style non-sprited buttons: OK
Keyboard shortcuts: OK
Sprited buttons in non-IE browsers: OK
Sprited buttons in IE: WTF
I've isolated the problem down to a call to selection.createRange() which finds nothing only when the sprited button is clicked. I've tried screwing around with focus()ing and making sure as little as possible happens before the doClick() but no joy. The keyboard shortcuts seem to work because the focus is never lost from the input textarea. Can anyone think of a hack that will let me somehow collect the selected text in IE?
The onclick handler looks like this:
button.onmouseout = function(){
this.style.backgroundPosition = this.XShift + " " + normalYShift;
};
button.onclick = function() {
if (this.onmouseout) {
this.onmouseout();
}
doClick(this);
}
I've tried moving the onmouseout call to after the doClick in case that was causing a loss of focus but that's not the problem.
EDIT:
The only thing that seems to be different is that, in the original button code, you are clicking on an image. In the sprited code, you are clicking on a list item <li> with a background image set. Perhaps it's trying to select the non-existent text in my list item?
/EDIT
Actual code is located in my wmd repository on git in the button-cleanup branch.
If you revert to the 0d6d1b32bb42a6bd1d4ac4e409a19fdfe8f1ffcc commit you can see both button bars. The top one is sprited and exhibits the weird behavior. The bottom one contains the remnants of the original button bar and works fine. The suspect code is in the setInputAreaSelectionStartEnd() function in the TextareaState object.
One last thing I should mention is that, for the time being, I'm trying to keep the control in pure Javascript so I'd like to avoid fixing this with an external library like jQuery if that's possible.
Thanks for your help!
I know what the answer to my own question is.
The sprited buttons are implemented using an HTML list and CSS, where all the list items have a background image. The background image is moved around using CSS to show different buttons and states (like mouseover highlights). Standard CSS button spriting stuff.
This works fine in IE with one exception: IE tries to select the empty list text when you click on the background image "button". The selection in the input textarea goes away and the current selection (which will be returned by document.selection.createRange()) is moved to the empty text in the list item.
The fix for this is simple - I created a variable to cache the selection and a flag. In IE I cache the selection and set the flag in a mousedown event handler. In the text processing, I check for the presence of the flag - if it's set I use the cached range instead of querying document.selection.createRange().
Here are some code snippets:
wmd.ieCachedRange = null;
wmd.ieRetardedClick = false;
if(global.isIE) {
button.onmousedown = function() {
wmd.ieRetardedClick = true;
wmd.ieCachedRange = document.selection.createRange();
};
}
var range;
if(wmd.ieRetardedClick && wmd.ieCachedRange) {
range = wmd.ieCachedRange;
wmd.ieRetardedClick = false;
}
else {
range = doc.selection.createRange();
}
The solution is only a few lines of code and avoids messing around with the DOM and potentially creating layout engine issues.
Thanks for your help, Cristoph. I came up with the answer while thinking and googling about your answer.
You have to blur() a button before IE can select anything else on a page.
Can you provide a minimal example (only containing relevant code) which reproduces the bug?
you can easily find focus() answers from the site or any site.. but what i want to know, how can i use focus after what i just inserted inside the input box.
$("input").val('#user').focus(); // this goes to start of the input box and foucs from start, but i want it to focus after the #user
$("input").val('#user today i did new things').focus(5); // i added 5 in focus method, obviously its not supported yet!, but the idea behind is, to focus it after #user from complete word.
EDITED:
i just saw that on firefox it works fine, but in chrome it starts the cursor from start. any solution?
Take a look at this question: jQuery Set Cursor Position in Text Area
You can focus an input area by triggering it on change event:
$("input").change(function(){
$(this).focus();
});
and if you want to check how many characters typed you can make a control on its callback:
//will focus if typed text's length is greater than 5
$("input").change(function(){
if($(this).val().length > 5){
$(this).focus();
}
});
hope it helps, Sinan.