• 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!

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Guest

Posted
Posted

basics:

<a href="javascript:insert_link();">Add a Links</a>

<script>
function insert_link()
{
var link = prompt('Link URL','http://');

document.formname.textboxname.value+=link;

}

Link to comment
Share on other sites
  • 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>

Link to comment
Share on other sites
  • 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.

Link to comment
Share on other sites
  • 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.

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.