Edit and Select Text using jQuery

Question

I have a text field which can be edited using click and i am doing it in jQuery.

Now i was wondering how can i select all the text in box when i click EDIT button

Code for edit

 $('.edit').click(function () {
     $(this).siblings('.edit-section').attr('contenteditable', 'true');
     $(this).siblings('.edit-section').attr('style', 'border:2px solid;');
     $(this).attr('style', 'display:none;');
     $(this).siblings('.done').attr('style', 'display:li;');
 });

I cannot add separate click function for .edit-section

score 3 · Accepted Answer · edited May 23 '17 at 10:26

3

Try,

 $('.edit,.done').click(function () {
     var section = $(this).siblings('.edit-section');
     var isEdit = $(this).is('.edit');
     section.prop('contenteditable',isEdit).css('border',isEdit?"2px solid":"none");
     $('.edit').toggle(!isEdit);
     $('.done').toggle(isEdit);
     if(isEdit){section.focus(); document.execCommand('selectAll',false,null); }
 });

DEMO

_Source

edited May 23 '17 at 10:26

Community

1
1

answered Jul 30 '14 at 10:44

Rajaprabhu Aravindasamy

66,513
17
101
130

score 3 · Answer 2 · edited May 23 '17 at 12:04

Demo

jQuery.fn.selectText = function () {
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

$(".edit").click(function () {
    $(".edit-section").selectText();
});

from : Selecting text in an element (akin to highlighting with your mouse)

score 2 · Answer 3 · edited May 23 '17 at 10:33

Possible duplicate - Programmatically select text in a contenteditable HTML element?

Copied following function from the answer.

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);

Updated JS-Fiddle - http://jsfiddle.net/vishwanatharondekar/zSwBL/5/

score 1 · Answer 4 · edited May 23 '17 at 12:29

Try

jQuery.fn.selectText = function(){
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

$("button").click(function() {
    $("#editable").selectText();
});

JSFiddle

Refence: How to select all text in contenteditable div?

Edit and Select Text using jQuery

4 Answers4

DEMO