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
How to Connect HTML Divs With Lines
Dynamically Loading CSS Stylesheet Doesn't Work on Ie
Add Svg Element to Existing Svg Using Dom
How to Use Jquery to Wait For the End of Css3 Transitions
Add Active Navigation Class Based on Url
Typeerror: $(...).Datatable Is Not a Function
Execute a Command Line Binary With Node.Js
Use a Content Script to Access the Page Context Variables and Functions
Is There a Regexp.Escape Function in JavaScript
What Is the Correct Syntax of Ng-Include
Html 5 Video or Audio Playlist
Bootstrap Close Responsive Menu "On Click"
How to Include CSS and Js Files Via Https When Needed
Can You Control Gif Animation With JavaScript
Get Computed Font Size For Dom Element in Js
Execjs::Runtimeerror on Windows Trying to Follow Rubytutorial