Suppose you have a textarea and a button, and that you wanted that button to get the position of the caret in a textarea, whenever that button was clicked. (I know, there would be a loss of focus from the text area to the button.)
Is there a way to recall where the caret was in the textarea? If so, how would one go about doing that (so that they could, for example, have said button write text to that area)?
Suppose you have a textarea and a button, and that you wanted that button to get the position of the caret in a textarea, whenever that button was clicked. (I know, there would be a loss of focus from the text area to the button.)
Is there a way to recall where the caret was in the textarea? If so, how would one go about doing that (so that they could, for example, have said button write text to that area)?
Share Improve this question asked Feb 20, 2015 at 1:38 Mike WarrenMike Warren 3,8869 gold badges53 silver badges107 bronze badges 2- The only thing I can really think of is triggering a keydown(), which I don't know how to do safely or correctly. – Mike Warren Commented Feb 20, 2015 at 1:39
- The other thing I could think of is to use keydown() and have it retrieve (and persist) the selectionStart,selectionEnd when it loses focus; /* again, this is beyond me */ – Mike Warren Commented Feb 20, 2015 at 1:44
2 Answers
Reset to default 5Get the position of caret when it loses focus:
var caretStart, caretEnd;
$('#textarea').on('blur', function(e) {
caretStart = this.selectionStart;
caretEnd = this.selectionEnd;
});
To write text when a button was click:
$('#btnWriteText').on('click', function(e) {
var text = " Example ";
var $this = $('#textarea');
// set text area value to: text before caret + desired text + text after caret
$this.val($this.val().substring(0, caretStart)
+ text
+ $this.val().substring(caretEnd));
// put caret at right position again
this.selectionStart = this.selectionEnd = caretStart + text.length;
});
This solution may help you. You can try out,
<html>
<head>
<title>Get/Set Caret in Textarea Example</title>
<script>
function doGetCaretPosition (ctrl) {
var CaretPos = 0;
// IE Support
if (document.selection) {
ctrl.focus ();
var Sel = document.selection.createRange ();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}
function setCaretPosition(ctrl, pos)
{
if(ctrl.setSelectionRange)
{
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
function process()
{
var no = document.getElementById('no').value;
setCaretPosition(document.getElementById('get'),no);
}
</script>
</head>
<body>
<textarea id="get" name="get" rows="5" cols="31">Please write some integer in the textbox given below and press "Set Position" button. Press "Get Position" button to get the position of cursor.</textarea>
<br>
Enter Caret Position: <input type="text" id="no" size="1" /><input type="button" onclick="process();" value="Set Position">
<BR>
<input type="button" onclick="alert(doGetCaretPosition(document.getElementById('get')));"
value="Get Position">
</body>
</html>
Source: http://blog.vishalon/index.php/javascript-getting-and-setting-caret-position-in-textarea/
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744230587a4564227.html
评论列表（0条）