CODEWITHSUNDEEP
jqueryhtml
AdityaKapreShrewsburyBoston
AdityaKapreShrewsburyBoston

Reputation: 1143

Unable to select complete text in jQuery editable on click

I am using a plugin jquery.editable-1.3.3.min.js and I am creating the editable input control like 

HTML:
<h6 id="editable_field">Add Note Here...</h6>

JS:
 $('#editable_field').editable();

Following is JS I am having problem with 

$('#editable_field').click(function () {
            $(this).select();
        });

So the above js is not working meaning - as soon as i click on editable_field, its all contents are not getting selected. Any workaround ?

Here is the fiddle On Click, I want the entire text to be selected/highlighted

Upvotes: 2

Views: 756

Answers (3)

AdityaKapreShrewsburyBoston
AdityaKapreShrewsburyBoston

Reputation: 1143

Text selection should happen after the input is created by jquery.editable. Jquery.editable will create input on click of as it is bound to id of . Hence, a timer is required to allow sufficient time for editable to create input and then fire javascript function to select text in newly created input

<h6 id="editable_field">Add Note Here...</h6>
$('#editable_field').editable(); 

$('#editable_field').click(function () {
    setTimeout(function() { $('#editable_field input').select(); }, 0);
});

fiddle

Upvotes: 0

Sam
Sam

Reputation: 916

All you need to do is select the input instead of the h6 like so:

HTML

<h6 id="editable_field">Add Note Here...</h6>

JS

$('#editable_field').editable(); 

$('#editable_field').click(function () {
    $(this).find('input').select();
});

jsFiddle

EDIT: This is definately a bit hacky... but it works Updated jsFiddle

$('#editable_field').click(function () {
    setTimeout(function() { $('#editable_field input').select(); }, 0);
});

Final code :

HTML

<h6 id="editable_field">Add Note Here...</h6>

JS

$('#editable_field').editable(); 

$('#editable_field').click(function () {
    setTimeout(function() { $('#editable_field input').select(); }, 0);
});

Upvotes: 2

Kevin Le - Khnle
Kevin Le - Khnle

Reputation: 10857

You must use the <input> tag, i.e.

<h6 id="editable_field">Add Note Here...</h6>

should have been

<input id="editable_field">Add Note Here...</input>

Upvotes: 0

Related Questions