javascript - Jquery Onclick text to text field - Stack Overflow

admin管理员组

文章数量:1401829

Onclick I want to change the text to input field. If I change the value in the input field and click anywhere, back to text. I found this fiddle.

/

$('#tbl').on('click','.xx',function() {
    $(this).siblings().each(
        function(){
            if ($(this).find('input').length){
                $(this).text($(this).find('input').val());
            }
            else {
                var t = $(this).text();
                $(this).text('').append($('<input />',{'value' : t}).val(t));
            }
        });
});

I used this fiddle. But the input value not changed to text. Please see my updated fiddle.

/

How can to achieve this?

Onclick I want to change the text to input field. If I change the value in the input field and click anywhere, back to text. I found this fiddle.

http://jsfiddle/davidThomas/767y4/8/

$('#tbl').on('click','.xx',function() {
    $(this).siblings().each(
        function(){
            if ($(this).find('input').length){
                $(this).text($(this).find('input').val());
            }
            else {
                var t = $(this).text();
                $(this).text('').append($('<input />',{'value' : t}).val(t));
            }
        });
});

I used this fiddle. But the input value not changed to text. Please see my updated fiddle.

http://jsfiddle/5Ach3/

How can to achieve this?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jun 4, 2014 at 12:01 AkashAkash 29511 gold badge55 silver badges1919 bronze badges 2

• like this? jsfiddle/5Ach3/1 – Anoop Joshi P Commented Jun 4, 2014 at 12:04
• jsfiddle/modaloda/5Ach3/8 – Mahmoude Elghandour Commented Jun 4, 2014 at 12:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Check this Demo Fiddle

$('#tbl').on('click','.xx',function() {

         var t = $(this).text();
         $(this).text('').append($('<input />',{'value' : t}));
         $('input').focus();


});

$('#tbl').on('blur','input',function() {
    $(this).parent().text($(this).val());
});

If you just want to transform text to input on click you can use contenteditable="true" html property. You don't need any JS with this way.

<p contenteditable="true">my text</p>

http://jsfiddle/9Ec5C/

本文标签： javascriptJquery Onclick text to text fieldStack Overflow