select in textarea 1

ecannizzo · Dec 1, 2006

I have a textarea I create like this:

<asp:TextBox onkeydown="HandleKeyDown(this);" runat="server" ID="Comments" Rows="10" TextMode="MultiLine" Width="100%"></asp:TextBox>

In the javascript function I am able to figure out when the tab key is pressed. Now, I have some text like this in the textarea:

Here is some text [ ], and here is some more [ ]

As the user presses the tab key within the textarea I would like to select the next [ ] characters. Can someone show me the way?

Thanks!

BillyRayPreachersSon · Dec 2, 2006

While in some browsers (certainly IE, possibly Fx) you can choose the text to highlight (within a textarea), you'd be better off not using a textarea for this, as it would be impossible to cater for doing this in all browsers otherwise.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

ecannizzo · Dec 2, 2006

I just need this to work in IE. Can you show me how to do this?

BillyRayPreachersSon · Dec 3, 2006

You would use the "createTextRange", "findText", "select", and "moveStart" methods, documented here:

http://msdn.microsoft.com/library/d...hor/dhtml/reference/objects/obj_textrange.asp

http://msdn.microsoft.com/library/d...r/dhtml/reference/methods/createtextrange.asp

http://msdn.microsoft.com/library/d...p/author/dhtml/reference/methods/findtext.asp

http://msdn.microsoft.com/library/d...r/dhtml/reference/methods/createtextrange.asp

http://msdn.microsoft.com/library/d.../author/dhtml/reference/methods/movestart.asp

to do the job. Here's a simple demo I've put together showing how to do it with a button press. I've shown you how to "reset" the selection, too. I'm sure you can manage to wire this up to the tab key instead:

Code:

<html>
<head>
	<script type="text/javascript">

		var theRange = null;
		window.onload = function() {
			try {
				theRange = document.getElementById('myText').createTextRange();
			} catch(e) {}

			if (theRange == null) {
				alert('There was an error creating a textRange. Perhaps your browser doesn\'t support them.');
			}
		}

		function findNext() {
			if (theRange != null) {
				theRange.findText('[ ]');
				theRange.select();
				var charsMoved = theRange.moveStart('character', 3);
				if (charsMoved == 0) {
					var startAgain = window.confirm('No more matches found. Start again from the beginning?');
					if (startAgain) {
						theRange.moveStart('textedit', -1);
						findNext();
					}
				}
			}
		}

	</script>
</head>

<body>
	<form>
		<textarea id="myText" cols="40" rows="5">Here is some text [ ], and here is some more [ ], and yet even more text! [ ]</textarea>
		<br />
		<input type="button" onclick="findNext();" value="Find next" />
	</form>
</body>
</html>

I've also turned this into an FAQ: Selecting specific text in a textarea (faq216-6479), as it's the sort of question that does crop up from time-to-time.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

BillyRayPreachersSon · Dec 3, 2006

Oops - that second "createTextRange" URL should have been:

http://msdn.microsoft.com/library/d...p/author/dhtml/reference/methods/select_1.asp

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

ecannizzo · Dec 4, 2006

Thanks so much!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

select in textarea 1

ecannizzo

Programmer

BillyRayPreachersSon

Programmer

ecannizzo

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

ecannizzo

Programmer

Similar threads

Part and Inventory Search

Sponsor