JavaScript - Returning The Selected Text Of A Textarea...
How can I get the selected text of a textarea with JavaScript?
example: Code: <form name="reportForm"> <textarea name="report"></textarea> <br /> <input type="button" onClick="GetSelectedText();" /> </form> Thanks IC Similar TutorialsI searched about this problem over Internet and found the same result many times, I found this example on stack overflow but this example didn't work in my project; I am making a toolbar with buttons that insert HTML tags around the selected text in a <textarea>, this exemple didn't work because when the user click on a button the selected text won't be selected anymore because <textarea> loses focus and selected text will be unselected, I am targeting Firefox and compatible browsers so you don't need to give me the IE code; jQuery codes are accepted; so, have you any idea?
like for example i have text areas named upload1 and upload2 when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts" Hi, i have this jquery script on my photo galery page, it detects left and right key down on keyboard and acts uppon key down. Is there any way to deactivate it when I click on a text area that is located below each photo? this must be a common issue I think... Textareas id="comment_" Code: <script type="text/javascript"> $(document).keydown(function(e){ if (e.keyCode == 37) { window.location = "photo.php?phot=$prev_file_p&p_id=$prev_file" return false; } else if (e.keyCode == 39) { window.location = "photo.php?phot=$next_file_n&p_id=$next_file" return false; }}); </script> Hello. I have a textarea where user can select a text then copy to clipboard (using EditArea script for highlighting) I need append additional information to the selected text so it won't be visible in the textarea, but only appear after copied to clipboard. For example: Code: text line one text line two text line three user selected word "two", hit CTRL+C to copy into clipboard (or used browser's context menu), but in clipboard it should be saved as: "selected word 'two'" What would be the approach? Thank you. I am wondering how can I return the variable senttext from the function below? I have declared it and when I alert(senttext) below it appears as I want it but I need to return it and pass it to another function. When I change alert() to return the variable becomes undefined??? var senttext; function getData() { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } req.open('GET',"http://www.site6.certcoordering1.com/Download/recall.txt" ); req.onreadystatechange = function() { if (req.readyState == 4) { if (req.status == 200) { senttext ='<table style="border:thin black solid"><tr><td><h2>Recent</h2></td><td><h2>Recalls</h2></td><td></td><td></td></tr>' ; var ad2 = req.responseText.split("\n"); for(i=0; i<ad2.length-1; i++) { // now split by comma var ad3 = ad2[i].split(","); senttext += '<tr><td><p>'+ad3[0]+'</p></td><td> <a href="http://www.site6.certcoordering1.com/Download/'+ad3[2]+' rel="nofollow" target="_blank">'+ad3[1] +'</a></td><td></td></tr>' } senttext += '</table>' ; alert(senttext); // I need to return senttext, not alert! When I send it it becomes undefined? } else { alert('File did not load correctly.'); } } } req.send(""); } I would like to ask is it posible to add text from a text file to a text area on a page.. Philp if you read this i am not asking for a javascript code i am asking wether or not it can be done. P.s if your a nice person like philp is not and you want to private message me if you have one I retrieve a list of links from a database using ajax, then I assign them to the innerHTML property of a div whose display property is set to "none" Then I set the display property to "display" to get a drop-down listbox. The problem is the links in the list are all hilighted like they've been dragged over by a mouse. How do I prevent these links from highlighting? I have a select box with a few options. When the page loads I need to get the selected option in this select box and alert its inner text. Yet everything I try out on the net that should work wont work in IE, all other browser its fine. Please can someone show me the TRUE and correct way to get the inner text of a option from a select box in IE? Thanks! Hey guys, I have a question about sending text to a textarea. What I want is, if I click on a button, a text has to be sent to my textarea, which I obtain from my mysql database. This last thing I can do myself, but I do not know how to send the text to my textarea. I don't know nothing from AJAX yet, so I think it can be done with AJAX, but also with javascript I guess. Could someone point me in the right direction? Thanks! How do I resize a textarea to a certain length for text without the scroll bar, it this possible with CSS or do I have to use jQuery?
Hey guys, I am wondering how to send text to a textarea when clicking on a link. Kinda like when clicking on a smiley or bbcode. I have a script, and it works, but only when the text to insert is on one line. Here is the code: Code: <script> function sendtext(e, text) { e.value += text } </script> Code: <img onClick="sendtext(document.myform.mytextarea, ':)')" src="smiley.gif"> Now I want to use this little script to insert an e-mail template which I am getting from the database into my textarea. Only, it works when the template is on one line, I am using this for my php code, which works, so no need to worry about that: Code: <img onClick="sendtext(document.myform.mytextarea, '<? echo ("$row['mytemplate']"); ?>')" src="smiley.gif"> When the "$row['mytemplate'];" is as follows: Code: Hey, this works It works, but when it's as follows: Code: Hey, it does not work Then it doesn't. So whenever there's a linebreak, it does not work. My question is, can someone help me with this, or a similar script, so I can add a piece of text to my textarea which has linebreaks in it? I hope you understand what I'm asking Thanks in advance for the help. End result: I want to have buttons along the top of a textarea which will be used to add tags around highlighted text / the text curser thingy. (Basically it will be an edit box like the I am using now to make this post). Problem at the moment: I want to reference the var to use in the function. e.g. Code: function addtext(id) { var al = "<div style=\"text-align:left;\"></div>"; document.myform.outputtext.value += id; } "id" will be defined as "al" in the HTML onclick function, I want this to use "var al" where it says ".value += id;". HTML: Code: <form name="myform"> <textarea name="inputtext">Type Here</textarea><br /> <textarea name="outputtext"></textarea><br /> <input type="button" value="Add New Text" onClick="addtext(al);"> </form> If I do this: onClick="addtext('al'); Then "al" is just written in the output box as it is sending a string, correct? If I do this: onClick="addtext("al"); / onClick="addtext(al); Then nothing happens... Reason I want to do it: Well, because I want to have multiple var's instead of a load of functions... Problem 2 (To fix after first problem): I also want the var to add around the highlighted text, not after all of the text. HI all, I am new to this forum and really needs your help. Please let me know how can I highlight a selected portion of an html document with javascript such that the selected portion is repeatedly shown highlighted on each and every page refresh. Thanks & Regards, Sumantra I need to clear the default value from a textarea when a user clicks on the textarea and then replace it if the user clicks away from the textarea without modifying it. I have managed to accomplish this with the textfields in my forms but I am struggling to get the textarea element to mimic this behavior. Here is the script I am using: Code: addEvent(window, 'load', init, false); function init() { var formInputs = document.getElementsByTagName('input'); for (var i = 0; i < formInputs.length; i++) { var theInput = formInputs[i]; if (theInput.type == 'text' && theInput.className.match(/\binput\b/)) { /* Add event handlers */ addEvent(theInput, 'focus', inputText, false); addEvent(theInput, 'blur', replaceDefaultText, false); /* Save the current value */ if (theInput.value != '') { theInput.defaultText = theInput.value; } } } } function inputText(e) { var target = window.event ? window.event.srcElement : e ? e.target : null; if (!target) return; if (target.value == target.defaultText) { target.value = ''; } } function replaceDefaultText(e) { var target = window.event ? window.event.srcElement : e ? e.target : null; if (!target) return; if (target.value == '' && target.defaultText) { target.value = target.defaultText; } } HTML: [HTML] <form action="#"> <fieldset> <legend></legend> <input type="text" value="Your Name" id="name" class="input" /> <label for="name">Name Required</label><br/> <input type="text" value="Your Email" id="email" class="input"/> <label for="email">E-mail Required</label><br/> <input type="text" value="Your Website" id="website" class="input"/> <label for="website">Website</label> <textarea rows="15" cols="71">Your Message Goes Here.</textarea> <input type="submit" value="Submit Comment" class="button" /> </fieldset> </form> [/HTML] I am really just trying to get this form to behave the way all other forms on the internet work- where text clears when a user clicks on a form element and replaces itself if the user doesn't enter new text. I have it working on the text field but no the textarea. Help! I have searched this forum for similar queries & have come up with this http://jsfiddle.net/defencedog/P33FR/ I don't know why this ain't working hi all, I have a simple website with 2 Frames, In top frame I have a button that invokes CGI script and internally that CGI script prints info (text) into the bottom frame. Going further we want to print the output coming from CGI into a textarea object in bottom form. I have a function in my CGI script: But ends up printing multiple textarea objects in lower frame. We want to print each line of text into the same textarea object in lower frame. and at the end display a new button. How can we do this using javascript/CGI? I tried the following but not displaying anything. sub print_message { my($message1, $message2) = @_; my $final_message = $message1 . " " . $message2; print <<END_HTML; <html> <head> <form name="myform"> <table border="0" cellspacing="0" cellpadding="5"> <tr> <td><textarea name="outputtext" rows="10" cols="100"> $final_message </textarea> </td> </tr> </table> </form> <style> <!-- a{font-weight:bold;font-family:arial;text-decoration:underline;font-size:13px;} a:hover{font-weight:bold;font-family:arial;text-decoration:none;font-size:13px;} // --> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <a href="main.html" rel="nofollow" target="bottom"></a> <title>CTS Debug Information</title> <style type="text/css"> img {border: none;} </style> </head> <body> </body> </html> END_HTML I created this function in javascript: <script language="javascript" type="text/javascript"> function addtext() { var newtext = document.myform.outputtext.value; var nextLineTextNode = document.createTextNode(newtext + "\r\n"); var logData = document.getElementById("outputtext"); logData.appendChild(nextLineTextNode); logData.scrollTop = logData.scrollHeight - logData.clientHeight; } </script> But when i implemented in my CGI nothing is printed. Thanks!!! Hello there, I am having trouble with a javascript snippet that adds text to a textarea when you click on the link. Problem is that when you regularly type into the textarea, the links no longer add text. Here is the links: Code: <a href="javascript:insertText('<b></b> ','textIns');" onClick="void(0)">Bold</a> Here is the javascript Code: <script type="text/javascript"> function insertText(val,e) { document.getElementById(e).innerHTML+=val; } </script> Any ideas or suggestions? I'm taking a beginning javascript class and have been trying to figure out one last part of a homework assignment and am just not seeing how to work it out. Any help is greatly appreciated! What I'm having trouble with is doing the text verification. When a user selects an option from the select list they then need to type in the text area given. If the user doesn't type the word selected in the list then an error message should appear under the text area. If you look at my code you'll see that I have the text_check() function doing the verification. I can get it to work when there is only one option but once I add the other two it stops working. I've tried if... else and other variations, but can't seem to nail it down. Thanks! Code: function select_function() { var medical=document.getElementById("medical_list") var selected_item=medical.selectedIndex if (selected_item==0) { document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Medication" + "</span>"+ " Information" var comments=document.getElementById("comments"); comments.focus(); } if (selected_item==1) { document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Hospitalization" + "</span>"+ " Information" var comments=document.getElementById("comments"); comments.focus(); } if (selected_item==2) { document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Physician" + "</span>"+ " Information" var comments=document.getElementById("comments"); comments.focus(); } } function text_check() { var user_comments=document.getElementById("comments").value.toLowerCase(); var med_comment=user_comments.indexOf('medication'); var hosp_comment=user_comments.indexOf('hospitalization'); var phys_comment=user_comments.indexOf('physician'); mySelectList = document.getElementById("medical_list"); if (mySelectList.value='Medication' && med_comment==-1) { document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Medication"+"</span>"+" somewhere in the text"; } if (mySelectList.value='Hospitalization' && hosp_comment==-1) { document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Hospitalization"+"</span>"+" somewhere in the text"; } if (mySelectList.value= 'Physician' && phys_comment==-1) { document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Physician"+"</span>"+" somewhere in the text"; } } function submit_alert() { alert("You submitted the form") } function clear_error() { document.getElementById("word_error").innerHTML=""; } function changeDR() { var my_textarea=document.getElementById("comments"); var comment_string=my_textarea.value; var doctor=comment_string.indexOf('Dr.'); var comment_string2=''; if (comment_string < 0) { comment_string2=comment_string } else { comment_string2=comment_string.replace('Dr.','Doctor') } my_textarea.value=comment_string2; } </script> </head> <body style="background-color: silver"> <h2>Medical History</h2> Select Category: <br> <select id="medical_list" onChange="select_function();"> <option>Medication</option> <option>Hospitalization</option> <option>Physician</option> </select> <br><br><br> <div id="enter_info">Enter Your <font color="blue">Medication</font> Information:</div> <br> <form method="post" action=""> <textarea id="comments" cols="60" rows="15" onBlur="text_check();" onFocus="clear_error();" onkeyup="changeDR();"> </textarea><br> <div id="word_error"></div><br> <input type="submit" value="Submit Information" onClick="submit_alert();"/> </form> </body> </html> Hi, Can somebody help me with the coding. I have a long list of events and I want somebody to be able to select one of those events & there will be a text box that shows the address pertaining to the event selected. Exactly how this website did he http://svacpa.com/live-webinars-and-...-registration/ Please advise! Thanks -------------- Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MySite Registration</title> </head> <body> <div style="width: 900px"> <p>Registration</P <form method="post" action="http://mysite.com" name="Registration"> <label id="Label1">First Name</label><input name="FirstName" type="text" /><br /><br /> <label id="Label1">Last Name</label><input name="LastName" type="text" /><br /><br /> <label id="Label2">Title</label><input name="Title" type="text" /><br /><br /> <label id="Label3">Company</label><input name="Company" type="text" /><br /><br /> <label id="Label5">Email</label><input name="Email" type="text" /><br /><br /> <label id="Label4">Phone</label><input name="Phone" type="text" /><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Breakfast</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Dinner</label><br /><br /> <br /> <input name="Submit1" type="submit" value="Register Now" class="submit" /> <input type="hidden" name="redirect" value="http://www.mysite.com/regsuccess.html"/> <input type="hidden" name="recipient" value="me@mysite.com"/> <input type="hidden" name="required" value="FirstName, LastName, Email, Phone"/> <input type="hidden" name="missing_field_redirect" value="http://mysite.com/regerror.html"/> </form> </div> </body> </html> Hi Guys, I am new to this forum,based on the combobox value,I am creating a textboxes dynamically in jsp .Based on the count of textboxe's the textarea content comes with <value1> like this... Here i tried like this, <html> <head> <script> function copy_data(val,id,textareaValue){ var enteredText = val; alert("enteredText -----------"+enteredText); var boxId= id; alert("boxId-----------"+boxId); var textValue= textareaValue; alert("textValue-----------"+textValue); var beforeBrac = textValue.substring(0,textValue.indexOf("<")); alert("beforeBrac -----------"+beforeBrac ); var inbracket = textValue.substring(beforeBrac.length+1,textValue.indexOf(">")); alert("inbracket -----------"+inbracket); if(boxId = "1"){ inbracket = val; } alert("inbracket -----------"+inbracket); var afterBrac = textValue.substring(textValue.indexOf(">"),textValue.length); alert("afterBrac -----------"+afterBrac ); var fstr = beforeBrac +"<"+inbracket +afterBrac ; if(boxId == "1"){ document.getElementById('txtArea').value = fstr; alert("final str value is"+fstr); } } </script> </head> <body> <input type="text" name ="a" id="1" onkeyup="copy_data(this.value,this.id,document.getElementById('txtArea').value)"/> <input type="text" name ="a" id="2" onkeyup="copy_data(this.value,this.id, document.getElementById('txtArea').value)"/> <textarea rows="2" cols="20" id="txtArea"> At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced <XML>, SQL, ASP, and PHP. </textarea> </body> </html> three text boxes with some value [ value1 ] [value2] [value3 ] this is the text area content:- At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced XML, SQL, ASP, and PHP. the output should be :- At W3Schools you <value1> find all <value2> Web-building tutorials <value3 > need, from basic HTML to advanced XML, SQL, ASP, and PHP... But i can't get it exactly..When i enter or delete the value it should replaced in the proper <> correctly.. If i enter the value in 1st textbox it should replace the value 1st <>.same for others also...Any Idea's ?Plz suggest me ... |