Replace text on enter input field

Question

So I basically have this input field that popups once text is clicked. And I want the text that I type in the input field to replace the original text, seems simple enough but I'm lost here...

JQuery:

$('.profile-brief').click(function () {
         $(this).click(function (e) {
             var statusBio = $('#status').val();
             $(this).replaceWith('<form><input id="status" type="text"></input></form>');
             if (e.keyCode == 13) {
                 console.log(statusBio);
                 $(this).html('<form><input id="status" type="text">' + statusBio + '</input></form>');
             }
         });
     });

Here's the http://jsfiddle.net/0beocw0o/

Suraz · Accepted Answer · 2014-09-06 02:39:14Z

1

I have updated your code in jsfiddle

  $('.profile-brief').on('click',function(e){
       var textbox = document.createElement('input');
       textbox.type = 'text';
       textbox.id = 'status';
       $('.profile-brief').html(textbox);
       $('.profile-brief').off();
       $('#status').on('keypress',function(e){
          if(e.keyCode === 13){
             $('.profile-brief').html($('#status').val());
          }
       });
   });

http://jsfiddle.net/0beocw0o/1/

answered Sep 6, 2014 at 2:39

Suraz

1,3091 gold badge8 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tinthetub Over a year ago

How can I get it to allow the text to be edited multiple times?

Suraz Over a year ago

Using hide and show solves this proble for multiple times here is link for that jsfiddle.net/0beocw0o/6

Jama A. · Accepted Answer · 2014-09-06 02:45:21Z

0

This is how you can do:

$('.profile-brief').click(function (e) {
        var txt=$(this).text(); 
        $(this).hide();
        var inputbox=$('#status');                 
        inputbox.val(txt);
        inputbox.show();
        inputbox.focus();

    });

$('#status').keypress(function(e){
    console.log(e.which);
    if(e.which == 13){
       var txt=$(this).val();
        $(this).hide();
        $('.profile-brief').text(txt);
        $('.profile-brief').show();
    }
});

it is better to put key event listener outside of onclick event listener and you have two click handlers, that's reason your click event is working after the second click.

Here is jsfiddle: http://jsfiddle.net/0beocw0o/3/

answered Sep 6, 2014 at 2:45

Jama A.

16.2k10 gold badges57 silver badges88 bronze badges

2 Comments

flowstoneknight Over a year ago

Note that the jQuery method .focus() does not focus an element. It is an event listener binding method, similar to .click(). What you want is the DOM element method. So something like inputbox[0].focus().

Jama A. Over a year ago

afaik, It delegates and triggers inputbox.focus() which puts cursor into the input box..

artm · Accepted Answer · 2014-09-06 02:59:14Z

0

My understanding of it; not sure why you want to add an input on keypress but you can try. This'll work for everytime you click profile-brief

$('.profile-brief').click(function () {
    $(this).toggle();
    $("#status").toggle();
    $("#status").focus();
})


$('#status').keydown(function(e){
    if (e.which == 13){
        var statusBio = $('#status').val();
        $(".profile-brief").html(statusBio);
    //$(".profile-brief").html('<form><input id="status2" type="text"></input></form>');
    //$("#status2").val(statusBio);
    $(".profile-brief").toggle();
    $("#status").toggle();
}

})

http://jsfiddle.net/0beocw0o/4/

answered Sep 6, 2014 at 2:59

artm

8,5943 gold badges28 silver badges43 bronze badges

Comments

Ty H. · Accepted Answer · 2014-09-06 03:05:37Z

0

All of the above answers work assuming you only need one of these "editable div's" on a page, because they update the text of every "profile-brief" element. This version is pure JQuery and works independently for each element you select.

http://jsfiddle.net/0beocw0o/5/

function fnEditableText(e) {
    $(this).unbind('click')
    .html('<input id="status" type="text"/>');

    $(this).find('#status').keypress(function(e) {
        if(e.which == 13) {
            var objTxt = $(this).parent();
            objTxt.html($(this).val());
            objTxt.click(fnEditableText);
        }
    });
}

$(document).ready(function() {
    $('.profile-brief').click(fnEditableText);
});

answered Sep 6, 2014 at 3:05

Ty H.

9538 silver badges8 bronze badges

Collectives™ on Stack Overflow

Replace text on enter input field

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related