[RESOLVED] document.selection issue
I've hit a snag trying to manipulate text in a textArea. Although there's some past articles on this topic, nothing on how to resolve my problem. Hope you can help. Ok...
I can use the document.selection; object to get the highlighted text in a textArea, and to then pass it into a TextRange. The problem I have is however, if nothing is highlighted the manipulated text is inserted outside of the textArea; into the document flow. Here's the core script:
HTML Code:
var txtSel = document.selection;
var txtRange = txtSel.createRange();
var age = "24";
txtRange = txtRange + " " + age;
That's fine, it updates the TextArea with the highlighted name and age. However, if no highlight occurs the age appears next to the TextArea. Any suggestions to force the age to be inserted wherever the insertion point is inside the TextArea?
Re: document.selection issue
Could you post your complete code including where you insert the manipulated text into the textarea? I tried to replicate your problem and I am not seeing the issue you've described. Think your fourth line should look like this though:
Code:
txtRange = txtRange.text + " " + age;
As an aside, document.selection is not supported by all browsers. If you're interested in cross-browser support, please take a look at this.
Re: document.selection issue
True, I omitted the txtRange.text from the code. There's not much more code to add. Once you select the text in the TextArea and press a button the text in the textArea updates.
I learned more of the problem. It's ok if I use the mouse to select, but if I use SHIFT+ARROW to select the text, tab to the button and then press SPACE, it applies the txtAge.value outside of the textarea.
Code:
<head>
<title>testSelection Property Example</title>
<script type="text/javascript" language="javascript">
function testSelection(){
var se1 = document.selection;
var tr1 = se1.createRange();
var str1 = tr1.text + " " + txtAge.value;
// if(se1.selection == null){
// alert("selection is nothing");
// return;
// };
if(tr1 != null || txtAge.value != ""){
tr1.text = str1;
} else{
alert("You cannot do that");
}
};
</script>
<style type="text/css">
</style>
</head>
<body>
<textarea id="txt1" cols="50" rows="20"></textarea><br />
<button id="btn1" onclick="testSelection();">Click for Range</button>
<input type="text" id="txtAge" maxlength="3" size="10" />
</body>
I'm not sure what's happening, as I cannot fathom why using the mouse would diverge significantly from using the keyboard :confused:
Re: document.selection issue
Testing for "tr1 != null" does not seem to be useful; if createRange() is supported by the browser, then tr1 will not be null (and if it is not supported, your script will fail when you try to call it). So I'd suggest changing that to:
Code:
if(tr1.text != "" || txtAge.value != ""){
As for inserting outside the textarea, here's my guess: when there's nothing selected, createRange() is still giving you a TextRange object, which is [by default] positioned at the "top" of the document (right after the <body> tag). You are then setting this TextRange's text property, resulting in text being inserted at the TextRange's position - prior to the <textarea>.
I would suggest setting the textarea's value property instead, if that's your aim:
Code:
if(tr1.text != "" || txtAge.value != ""){
txt1.value = str1;
//or this, if you want to append the text:
//txt1.value = txt1.value + str1;
} else{
alert("You cannot do that");
}
Re: document.selection issue
I'm working on passing the selection.TextRange into a textArea.TextRange, but the details are still relatively sketchy at the moment. You get to the crest of a hill, only for some weird whacked out bug/design to knock you all the way back down :/
Thanks for the help SambaNeko
Re: [RESOLVED] document.selection issue
Figured it out. Implanted the text prior to manipulating the text. Used collapse instead of MoveToEnd() and then expand("sentence")
Works perfect.
