• 0

[JavaScript] Appending text to an HTML Textbox

Asked by Stokkolm,

 Share

Question

Grand Master

Stokkolm

Posted
Posted

I'm looking to have append text to an HTML Textbox much like when creating a new thread here you can click IMG and link to an image or use the http:// button to add a link.

I can get JavaScript to place text in a textbox but it replaces whatever is already in there. Can anybody help me with that? Thanks!

6 answers to this question

Recommended Posts

  • 0
Experienced

Biaxident

Posted
Posted

There you go. Took me 2 minutes. :)

<html>
<head>
	<script language="javascript">
	<!--
  function insertText()
  {	
 	 var url
 	 url=prompt("Enter URL below:", "http://");
 	 document.frm.box.value="[URL]"+url+"[/URL]";
  }
	//-->
	</script>
</head>
<body>
	<form name="frm">
  <input type="text" name="box" />
  <input type="button" name="insertTxt" onClick="insertText();" value="Insert Text"/>
	</form>
</body>
</html>

  • 0

Guest jzetterman

Posted
Posted
There you go. Took me 2 minutes. :)

<html>
<head>
	<script language="javascript">
	<!--
 ?function insertText()
 ?{	
 ?	var url
 ?	url=prompt("Enter URL below:", "http://");
 ?	document.frm.box.value="[URL]"+url+"[/URL]";
 ?}
	//-->
	</script>
</head>
<body>
	<form name="frm">
 ?<input type="text" name="box" />
 ?<input type="button" name="insertTxt" onClick="insertText();" value="Insert Text"/>
	</form>
</body>
</html>

Well, what if you already have text in the box? That will replace everything. You can do "+=" to put it on the end, but I need to be able to put it in the middle of the text box with text above and below where it inserts it.

  • 0
Community Regular

chuayw2000

Posted
Posted

You can do it using some caret thinggy. You can see it at http://www.faqts.com/knowledge_base/view.p...id/1052/fid/130.

I have an example here on how to use it.

<html>
<head>
<title>Some page</title>
<script type="text/javascript">
// Insert at Claret position. Code from
// http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130
current = "nothing"
function storeCaret(textEl) {
	if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
current = textEl
}
function addcode(text,whatever){
if (whatever == "nothing"){
alert("Error, please select a field to insert the smile/code.")
}
else if (whatever.createTextRange && whatever.caretPos) {
  var caretPos = whatever.caretPos;
  caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
  whatever.focus();
	} else {
	whatever.value  += text;
	whatever.focus();
	}
}
</script>
</head>
<body>
<input type="text" name="comment" size="8" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);">
<br><br><a href='javascript:addcode("text",current)'>Add text</a>
</body>
</html>

In this example, when u click on the text field and u click the add text link, it will add the text there Try it. You can examine the code for more info.

P.S.: I use this on ym site, go there then go to the tagboard and try it.

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.