Programmatically Selecting Partial Text in an Input Field

Programmatically selecting partial text in an input field

Here's how to select a portion of a text box (range select) and get the selected text:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Test </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function() {
var message = document.getElementById('message');
// Select a portion of text
createSelection(message, 0, 5);
// get the selected portion of text
var selectedText = message.value.substring(message.selectionStart, message.selectionEnd);
alert(selectedText);
};

function createSelection(field, start, end) {
if( field.createTextRange ) {
var selRange = field.createTextRange();
selRange.collapse(true);
selRange.moveStart('character', start);
selRange.moveEnd('character', end);
selRange.select();
field.focus();
} else if( field.setSelectionRange ) {
field.focus();
field.setSelectionRange(start, end);
} else if( typeof field.selectionStart != 'undefined' ) {
field.selectionStart = start;
field.selectionEnd = end;
field.focus();
}
}
</script>
</head>
<body>
<input type="text" name="message" id="message" value="Hello World" />
</body>
</html>

Demo

Partially select text inside text field

You will need to use Range, and cross-browser compatibility will probably be an issue.

Quirksmode: Creating a Range object from a Selection object

If jQuery is an option, here is a function you can use (reference)...

$.fn.selectRange = function(start, end) {
return this.each(function() {
if(this.setSelectionRange) {
this.focus();
this.setSelectionRange(start, end);
} else if(this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};

How to Select particular text in textbox while textbox receives focus

assume you have TextInput you want to select its first character, whenever its selected

<input id="MyText" type="text" value="text" onclick="MyText_click()" />

and the script is like this:

<script>

function MyText_click() {

var input = document.getElementById("MyText");
createSelection(input, 0, 1); // first character
};

function createSelection(field, start, end) {
if (field.createTextRange) {
var selRange = field.createTextRange();
selRange.collapse(true);
selRange.moveStart('character', start);
selRange.moveEnd('character', end);
selRange.select();
field.focus();
} else if (field.setSelectionRange) {
field.focus();
field.setSelectionRange(start, end);
} else if (typeof field.selectionStart != 'undefined') {
field.selectionStart = start;
field.selectionEnd = end;
field.focus();
}
}

</script>

Programmatically select text (like as done with a mouse) that matches string in a textarea element

You could use my jQuery plug-in. It works around browser differences in textarea selection manipulation and has some convenience methods:

https://code.google.com/p/rangyinputs/

For your example, the code would be

var $textarea = $("#body");
var text = "path to image file"
$textarea.replaceSelectedText(text, "select");
$textarea.surroundSelectedText("[img]", "[/img]");

Demo: http://jsfiddle.net/P8Jrh/1/

Selecting all text in HTML text input when clicked

You can use the JavaScript .select() method for HTMLElement:

<label for="userid">User ID</label>
<input onClick="this.select();" value="Please enter the user ID" id="userid" />

Selecting text in a div programmatically using position values belong to that text

Here is a simple way to to this:

function selectTextRange(obj, start, stop) {  var endNode, startNode = endNode = obj.firstChild
startNode.nodeValue = startNode.nodeValue.trim(); var range = document.createRange(); range.setStart(startNode, start); range.setEnd(endNode, stop + 1); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range);}
selectTextRange(document.getElementById('textdiv'), 3, 10);
<div id="textdiv">  Hello world. I am a friend.</div>

Programmatically select text in a contenteditable HTML element?

If you want to select all the content of an element (contenteditable or not) in Chrome, here's how. This will also work in Firefox, Safari 3+, Opera 9+ (possibly earlier versions too) and IE 9. You can also create selections down to the character level. The APIs you need are DOM Range (current spec is DOM Level 2, see also MDN) and Selection, which is being specified as part of a new Range spec (MDN docs).

function selectElementContents(el) {
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}

var el = document.getElementById("foo");
selectElementContents(el);

Selecting a specific subsection of a text input box in Javascript/YUI

setSelectionRange() works on all major browsers except IE <= 8. Since get() and set() are not standard methods of DOM elements, I'm pretty sure inputNode is not a reference to an actual <input> element. I imagine it's a YUI wrapper object around an <input> element. You need to call setSelectionRange() on the input itself rather than the YUI wrapper object.

How to select line of text in textarea

This function expects first parameter to be reference to your textarea and second parameter to be the line number

function selectTextareaLine(tarea,lineNum) {
lineNum--; // array starts at 0
var lines = tarea.value.split("\n");

// calculate start/end
var startPos = 0, endPos = tarea.value.length;
for(var x = 0; x < lines.length; x++) {
if(x == lineNum) {
break;
}
startPos += (lines[x].length+1);

}

var endPos = lines[lineNum].length+startPos;

// do selection
// Chrome / Firefox

if(typeof(tarea.selectionStart) != "undefined") {
tarea.focus();
tarea.selectionStart = startPos;
tarea.selectionEnd = endPos;
return true;
}

// IE
if (document.selection && document.selection.createRange) {
tarea.focus();
tarea.select();
var range = document.selection.createRange();
range.collapse(true);
range.moveEnd("character", endPos);
range.moveStart("character", startPos);
range.select();
return true;
}

return false;
}

Usage:

 var tarea = document.getElementById('myTextarea');
selectTextareaLine(tarea,3); // selects line 3

Working example:

http://jsfiddle.net/5enfp/



Related Topics



Leave a reply



Submit