|
JavaScript - Adding Text To Cursor Position In A Textarea
Sup yo, I need to add text in a <textarea>, but i can only append text at the end.
Is there any way to add text to where the cursor is currently at? Code: function addCharm(var1) {
var newtext = var1;
document.lolform.inputtext.value += newtext;
}
And below i has sum buttonz that uses that function. So, again, how can I add text to where the I-beam is currently, instead of at the end? Thanks in advance. Similar TutorialsThis is just a goofy little project to add to my learning, but I've come across a problem that would be nice to solve. It is not a TinyMCE or other JS editor replacement, just something to play with for the holidays! In the following program, you can create an HTML template then add/modify common elements and display the results. I can place tags around highlighted areas and insert/append functions where the cursor is positioned. Works OK so far. The problem is when the text exceeds the <textarea> boundaries and I try to tag or insert at cursor, the display reverts to the first line of the <textarea> display. I would like to keep the displayed area within the boundaries and just push down the inserted text. Problem: Is there a simple way to accomplish this task or do I just have to put-up with the bouncy display whenever I insert code into the area? Code: <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Simple JS Editor</title>
<!--
One annoyance: When <textarea> content exceeds size of element
additional entries cause display to JUMP to beginning
of the area being edited.
-->
<style type="text/css">
.tags { background-Color:lightblue; }
.objs { background-Color:pink; }
.ctrl { background-Color:lime; }
</style>
<script type="text/javascript" language="javascript"> <!-- External: src="InsertText.js"></script -->
// function insertAtCursor(myField, myValue) {
function InsertText(myField, myValue) {
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0') {
// else if (myField.selectionStart != 'undefined') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
} else { myField.value += myValue; }
myField.focus(); // new entry here
}
// calling the function
// insertAtCursor(document.formName.fieldName, value);
</script>
<script type="text/javascript"> <!-- External: src="InsertCode.js"></script -->
// Modified from:
// http://www.codingforums.com/showthread.php?t=134113 - Author Kor
// http://www.codingforums.com/showthread.php?t=182713
var HTMLstart = ['<!DOC HTML>',
'<html>','<head>','<title> Untitled </title','',
'<style type="text\/css"><\/style>','',
'<script type="text\/javascript">',
' function $_(IDS) { return document.getElementById(IDS); }',
'<\/script>','',
'</head>','<body>','','<h1> Test </h1><hr>','',
'</body>','</html>'
];
var RBtnStart = ['<input type="radio" name="RBtn" value="0">RBtn 1',
'<input type="radio" id="RBtn" name="RBtn" value="1">RBtn 2',
'<input type="radio" id="RBtn" name="RBtn" value="2">RBtn 3',''
];
var CBoxStart = ['<input type="checkbox" id="CBox0" name="CBox0" value="A">CBox A',
'<input type="checkbox" id="CBox1" name="CBox1" value="B">CBox B',''
];
var SBoxStart = ['<select id="SBox" name="SBox">',' <option value="">Pick</option>',
' <option value="1">1</option>',' <option value="2">2</option>',
' <option value="3">3</option>',' <option value="4">4</option>',
' <option value="5">5</option>',' <option value="6">6</option>',
'</select>',''
];
var TblsStart = ['<table border="1">','<caption> Table </caption',
' <tr>',' <td> 1 </td>',' <td> 2 </td>',' </tr>',
' <tr>',' <td> 3 </td>',' <td> 4 </td>',' </tr>',
'</table>',''
];
var ULstart = ['<ul>',' <li> 1 </li>',' <li> 2 </li>',' <li> 3 </li>','</ul>',''];
var OLstart = ['<ol>',' <li> A </li>',' <li> B </li>',' <li> C </li>','</ol>',''];
var DLstart = ['<dl>',' <dt> A </dt>',' <dt> B </dt>',' <dt> C </dt>','</dl>',''];
function formatText(el,tag){
var selectedText = document.selection
?document.selection.createRange().text
:el.value.substring(el.selectionStart,el.selectionEnd); // IE:Moz
if (selectedText == "") {return false}
var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
if(document.selection) { document.selection.createRange().text=newText; } // IE
else { // Moz
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return false">
<textarea id="myTextarea" name="myTextarea" rows="18" cols="80"
style="font-family: monospace; font-size: 12pt; float: left;"></textarea>
<div style="float: left;"><h3 class="tags">Enclose (highlighted)</h3>
<input class="tags" value="Bold" onclick="formatText (myTextarea,'b');" type="button">
<input class="tags" value="Italic" onclick="formatText (myTextarea,'i');" type="button">
<input class="tags" value="Underline" onclick="formatText (myTextarea,'u');" type="button">
<br>
<input class="tags" value="h1" onclick="formatText (myTextarea,'h1');" type="button">
<input class="tags" value="h2" onclick="formatText (myTextarea,'h2');" type="button">
<input class="tags" value="h3" onclick="formatText (myTextarea,'h3');" type="button">
</div>
<div style="float: left;"><h3 class="objs">Insert</h3>
<button class="objs" onClick="InsertText(this.form.myTextarea,RBtnStart.join('\n'))">RBtn</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,CBoxStart.join('\n'))">CBox</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,SBoxStart.join('\n'))">SBox</button>
<br>
<!--
<button class="objs" onclick="alert('Not coded yet')">1D-Array</button>
<button class="objs" onclick="alert('Not coded yet')">2D-Array</button>
<button class="objs" onclick="alert('Not coded yet')">Populate</button>
<br>
<button class="objs" onclick="alert('Not coded yet')">Toggle</button>
-->
<button class="objs" onClick="InsertText(this.form.myTextarea,TblsStart.join('\n'))">Tabel</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,'<br>')">br</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,'<p>')">p</button>
<br>
<button class="objs" onClick="InsertText(this.form.myTextarea,ULstart.join('\n'))">ul-li</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,OLstart.join('\n'))">ol-li</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,DLstart.join('\n'))">dl-dt</button>
</div>
<div style="float: left;"><h3 class="ctrl">Control</h3>
<button class="ctrl" onclick="document.getElementById('myTextarea').value=HTMLstart.join('\n')">Template</button>
<button class="ctrl" onClick="javascript:this.form.myTextarea.focus();this.form.myTextarea.select();">
Highlight Text to Copy</button>
<button class="ctrl" onclick="document.getElementById('myTextarea').value=''">
Clear</button>
<p>
<button class="ctrl" onclick="document.getElementById('myEditResults').innerHTML = document.getElementById('myTextarea').value">
Display</button>
</div>
<div id="myEditResults" style="float:left; border: 1px solid red; height: 20em; width: 70em; overflow:auto;">
</div>
<br style="clear: both;">
</form>
</body>
</html>
I'm trying to write a function that is similar to the ctrl+f functionality you get in IE, where you have a search string and when you click 'next' the whole string if matched is highlighted by the cursor. This works fine for inputs and text areas using the following code: Code: function setCaretPos(obj, start, end)
{
var range = obj.createTextRange();
range.moveStart('character', start);
range.moveEnd('character', end - obj.value.length);
range.select();
}
But now I need to get it to work for normal text in a text node that is in the HTML/DOM. Is there an equivalent way of making the above method work for text in text nodes? Alternatively is there a way to make the browser (IE) at least focus on some text in a text node? (I could then highlight it with CSS styles). Here is my example code Code: <html>
<head>
</head>
<body onload="addtext()">
How do I keep the cursor position after the " has been replaced with &quot;?<br><br>
<form name="update" id="update" method="post" action="">
<textarea name="description" id="description" value="" cols="55" rows="15" onKeyUp="addtext()">Type a quote here[] and see the cursor move to the end he </textarea>
<br>
Result:<br>
<div name="outputtext" id="outputtext"></div>
</form>
</body>
<script language="javascript" type="text/javascript">
function addtext() {
var newtext = document.update.description.value;
document.getElementById('outputtext').innerHTML = newtext.replace(/\r\n|\n/g,"<br />");
document.getElementById('description').value = newtext.replace(/"/g,""");
}
</script>
</html>
I'm not very well versed in javascript. I'm trying to make a bookmarklet that when I click it will either append text to what I've already written or insert the predefined text at the cursor's position in a textarea. Also the browser I'm trying to do this on is Chromium. Here's what I have: Code: javascript:void((function(){document.getElementsByTagName('textarea')[0].value='ಠ_ಠ'})())
...but this of course changes the entire value of the text field to: ಠ_ಠ ...rather than appending or inserting at the cursor position. I'm guessing append would be the simplest, though cursor position would be most efficient. So if you can help in anyway, please do! Thanks. I have a WYSIWYG text area and I want to insert combo-box' value at current cursor location of the WYSIWYG text area. I have a simple textarea where the value is inserting on combo-box clicking. But when I do integrate both files, the functionality wont work. I have both scripting files..
Hi all, I'm trying to get the cursor position to move to the end of the text within an editable iframe or div. I've been pointed to something called TextRange and have been reading up on it for days yet couldnt make sense of much (i'm still very new). what i'm trying to do is on a button click, the cursor will move to the end of the text in the iframe. any help or pointers would be greatly appreciated. thanks. 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 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! 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. 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?
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. I 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?
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 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! 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 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 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 ... Hi, I am having trouble searching for text in a textarea in all browsers. I display formatted text in a textarea with tinyMCE editor. Some of the text contains blanks ('______') which the user needs to find and fill in (usually with a number). I have written a new button on the toolbar of the editor which will find and highlight the blank when clicked. The user will click the button, fill in the text, click the button, fill in the text, etc. In IE the blanks are highlighted just fine. The only problem is: user clicks button and first blank is highlighted. User fills in the text then clicks the button again. Second blank should be highlighted but it skips right to the third blank. If you don't fill anything in, the next blank will be highlighted. If you highlight and then fill anything in, the next blank is skipped and the following blank is highlighted. Any thoughts? But my worst problem is with Mozilla. I get an error. It does not act like setSelectionRange(pos, pos+len(str)) is a valid function call. I receive the following error: "component returned failure code: 0x800004005 (NS_ERROR_FAILURE)[nsIDOMNSHTML TextareElement.setSelectionRange]" Here is my function: var win = window; var n = 0; var str = '______'; function FindBlanks() { var txt, i, found; win = tinyMCE.get('txtPolicy').getDoc(); if (str == "") return false; if (window.execScript) { txt = win.body.createTextRange(); //Find the nth match from the top of the page for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) { txt.moveStart("character", 1); txt.moveEnd("textedit"); } // If found, mark it and scroll it into view if (found) { txt.moveStart("character", -1); txt.findText(str); txt.select(); txt.scrollIntoView(); // n = i--; n++; } //Otherwise, start over at the top of the page and find first match else { if (n > 0) { n = 0; alert("End of document has been reached."); } //Not found anywhere, give message. else alert("No blanks found."); } } else { //document.getElementById('txtPolicy').setFocus; var ht = '______'; if (ht.length == 0) { alert('highlightText has zero lenth'); return false; } var str2 = document.getElementById('txtPolicy').value; var startPos = str2.indexOf(ht); if (startPos == -1) { alert('No blanks found'); return false; } document.getElementById('txtPolicy').focus(); document.getElementById('txtPolicy').setSelectionRange(startPos, startPos + ht.length); return true; if (n == 0) alert ("No blanks found."); } return false; } Can anyone help me with this? Thanks. I am looking for a javascript code for this idea under this message ---------------------------------------------------------------------------------------------------------------------------------------------------- I want to create a kind of shopping website so when you click on a image or text it will add some text to a textarea,, it will include the name of item and price of an item |
|||||||