Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-27-2011, 07:41 PM   PM User | #1
Zinnia-Aster
New to the CF scene

 
Join Date: Dec 2010
Posts: 7
Thanks: 2
Thanked 0 Times in 0 Posts
Zinnia-Aster is an unknown quantity at this point
Question Inserting Content to Text Area Repeatedly

Hey there everybody,

Seems I need help again. Still trying to learn the ways of the javascript.

So here is my dilemma:
I have a text field and some buttons below it. When I click on the button it insert the text for it into the text field. However, in order for that text to display in the text field a second time in a row I have to click on the text field and then click on the button again.

What I would like to be able to do is to click on the button several times in a row so that it inserts the text again and again without having to click on the text field to reselect it. What's wrong with this script that is causing it to work that way? What can I do to fix it?

By the way, I will be coupling this code with a popup code. The popup code, which works perfectly fine, has buttons in it as well and insert that text into the main window text area repeatedly. I just need some buttons on my main window that do the same thing. I hope the explanation makes sense.

With all of this playing around, I know I'll get the hang of it eventually. I hope. . .

Any help is greatly appreciated.

Code:
<html>
<script type="text/javascript">
function insert(el,ins) {
window.lstText={};
    if (el.setSelectionRange){
        el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
    }
    else if (document.selection && document.selection.createRange) {
        el.focus();
        var range = document.selection.createRange();
        range.text = ins + range.text;
    }
}
</script>
<body>
<form>


<textarea rows="20" cols="100" name="txt1" onfocus="window.lstText=this;">
This is sample text, click anywhere in here then
choose on of the buttons above to see text inserted.
</textarea><br /><br />
<input type="button" value="Hi" onclick="insert(window.lstText,'Hi')">
<input type="button" value="Bye" onclick="insert(window.lstText,'Bye')">
<br />
</form>
</body>
</html>

Last edited by Zinnia-Aster; 02-27-2011 at 08:26 PM..
Zinnia-Aster is offline   Reply With Quote
Old 02-27-2011, 08:15 PM   PM User | #2
chump2877
Senior Coder

 
chump2877's Avatar
 
Join Date: Dec 2004
Location: the U.S. of freakin' A.
Posts: 2,547
Thanks: 15
Thanked 131 Times in 124 Posts
chump2877 is on a distinguished road
Just add the highlighted line:

Code:
<script type="text/javascript">
function insert(el,ins) {
window.lstText={};
    if (el.setSelectionRange){
        el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
    }
    else if (document.selection && document.selection.createRange) {
        el.focus();
        var range = document.selection.createRange();
        range.text = ins + range.text;
    }
   el.focus();
}
</script>
__________________
Regards, R.J.

---------------------------------------------------------

Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
[Related videos and tutorials are also available at my YouTube channel]
chump2877 is offline   Reply With Quote
Users who have thanked chump2877 for this post:
Zinnia-Aster (02-27-2011)
Old 02-27-2011, 08:25 PM   PM User | #3
Zinnia-Aster
New to the CF scene

 
Join Date: Dec 2010
Posts: 7
Thanks: 2
Thanked 0 Times in 0 Posts
Zinnia-Aster is an unknown quantity at this point
Thumbs up

Quote:
Originally Posted by chump2877 View Post
Just add the highlighted line:

Code:
<script type="text/javascript">
function insert(el,ins) {
window.lstText={};
    if (el.setSelectionRange){
        el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
    }
    else if (document.selection && document.selection.createRange) {
        el.focus();
        var range = document.selection.createRange();
        range.text = ins + range.text;
    }
   el.focus();
}
</script>
That's all I was missing? Wow, thanks so much for that. It is working fine now. And it is working alongside my popup code too. This is great. Much appreciated.
Zinnia-Aster is offline   Reply With Quote
Old 02-28-2011, 08:19 AM   PM User | #4
Philip M
Supreme Master coder!

 
Philip M's Avatar
 
Join Date: Jun 2002
Location: London, England
Posts: 17,098
Thanks: 197
Thanked 2,421 Times in 2,399 Posts
Philip M has a spectacular aura aboutPhilip M has a spectacular aura aboutPhilip M has a spectacular aura about
Suggested improvement to avoid error if button pressed but no insertion point selected:-

Code:
<script type="text/javascript">
function insert(el,ins) {
if (typeof el === 'undefined') {
return false;
}

if (el.setSelectionRange){
el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
}
else if (document.selection && document.selection.createRange) {
el.focus();
var range = document.selection.createRange();
range.text = ins + range.text;
}
el.focus();
}
</script>
"During her imprisonment she gave birth to two girls aged 11 and 15". - BBC Radio 4
Philip M is offline   Reply With Quote
Reply

Bookmarks

Tags
content, insert, javascript, onclick, textfield

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 07:12 AM.


Advertisement
Log in to turn off these ads.