Selecting Text in a Div Programmatically Using Position Values Belong to That Text

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>

Dynamically type a text inside a div using jQuery

Use .focus() on input additionally.

Demo: http://jsfiddle.net/p2ct8eL7/4/

JS:

$('div').click(function (e) {
    var top = e.clientY - 20 + 'px';
    var left = e.clientX - 20 + 'px';
    var i = $('<input type="text">'); //Store the input in a variable.
    $('div').append(i);
    i.css({
        'position': 'absolute',
        'top': top,
        'left': left
    }).focus(); // modify the current input instead of all.
});

How to know if selected text is inside a specific div

2022 answer

The elementContainsSelection() function below returns a boolean representing whether the specified element contains the whole of the user's selection and works in all modern browsers.

function elementContainsSelection(el) {
    var sel = window.getSelection();
    if (sel.rangeCount > 0) {
        for (var i = 0; i < sel.rangeCount; ++i) {
            if (!el.contains(sel.getRangeAt(i).commonAncestorContainer)) {
                return false;
            }
        }
        return true;
    }
    return false;
}

<input type="button" onmousedown="alert(elementContainsSelection(document.getElementById('cake')))" value="Selection contained in 'slice of cake'?">

<div contenteditable="true">
    Cup of tea and a <b id="cake">slice of cake</b>
</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);

How to set the caret (cursor) position in a contenteditable element (div)?

In most browsers, you need the Range and Selection objects. You specify each of the selection boundaries as a node and an offset within that node. For example, to set the caret to the fifth character of the second line of text, you'd do the following:

function setCaret() {
    var el = document.getElementById("editable")
    var range = document.createRange()
    var sel = window.getSelection()
    
    range.setStart(el.childNodes[2], 5)
    range.collapse(true)
    
    sel.removeAllRanges()
    sel.addRange(range)
}

<div id="editable" contenteditable="true">
  text text text<br>text text text<br>text text text<br>
</div>

<button id="button" onclick="setCaret()">focus</button>

How do I programatically select an HTML option using JavaScript?

Change

document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected'

to

document.getElementById('personlist').value=Person_ID;

---

Related Topics