I am a newbie so my question is pretty simple and straight forward.

I have a simple html text. When I click on that html text, the text should change to input field with the value retained and when the user clicks outside the text box, the input text field now should change to html text.

<div class="myText"> Hellow World </div>

Can somebody do this in jquery/Meteor. I am actually building a meteor project

I am a newbie so my question is pretty simple and straight forward.

I have a simple html text. When I click on that html text, the text should change to input field with the value retained and when the user clicks outside the text box, the input text field now should change to html text.

<div class="myText"> Hellow World </div>

Can somebody do this in jquery/Meteor. I am actually building a meteor project

• javascript
• jquery
• html
• css
• meteor

• In short, adding an onClick event which changes the text into an input. with .html(). Also add an onBlur event which changest the class back to the value of the current inputbox with .val() – Jesse Commented May 6, 2015 at 7:41
• It is pretty tricky as an algorithm... you should try to keep things plain and simple, less headaches, imho. – Masiorama Commented May 6, 2015 at 7:42
• It is quite simple: look into the contenteditable attribute! – 11684 Commented May 6, 2015 at 11:50

8 Answers 8

You can do that with the contenteditable attribute

<div class="myText" contenteditable="true"> Hellow World </div>
<!-- Your div is now editable -->

Updated DEMO jsFiddle

$(document).ready(function() {
    $('.editable').on('click', function() {
        var that = $(this);
        if (that.find('input').length > 0) {
            return;
        }
        var currentText = that.text();

        var $input = $('<input>').val(currentText)
        .css({
            'position': 'absolute',
            top: '0px',
            left: '0px',
            width: that.width(),
            height: that.height(),
            opacity: 0.9,
            padding: '10px'
        });

        $(this).append($input);

        // Handle outside click
        $(document).click(function(event) {
            if(!$(event.target).closest('.editable').length) {
                if ($input.val()) {
                    that.text($input.val());
                }
                that.find('input').remove();
            }
        });
    });
});

In my solution you need to add class="editable" to all editable divs.

You also need to set position: relative to these divs. May be you can update my code and edit the css:

.editable {
  position: relative;
}

To correctly align the input inside the div, you need to remove the border or set the .css({}) of the input to left: -1px and top: -1px. The border actually pushes the input 1px left and 1px form the top.

Try this:

$(function() {
  $('div.myText').on('click', function() {
    var div = $(this);
    var tb = div.find('input:text');//get textbox, if exist
    if (tb.length) {//text box already exist
      div.text(tb.val());//remove text box & put its current value as text to the div
    } else {
      tb = $('<input>').prop({
        'type': 'text',
        'value': div.text()//set text box value from div current text
      });
      div.empty().append(tb);//add new text box
      tb.focus();//put text box on focus
    }
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="myText">Hello world</div>
<div class="myText">This is second</div>

Try this:

$(document).click(function() {
  $('.myText').html("Hello World");
});

$(".myText").click(function(event) {
  $('.myText').html("<input type='text' id='test' value='Hello World'/>");
  $('#test').focus();
  event.stopPropagation();
});

FIDDLE.

To do it very easily and understandable you can also make two elements instead of changing. Working fiddle: http://jsfiddle/45utpzhx/

It does an onClick event and onBlur.

html

<div>
    <span class="myText">Hello World</span>
    <input class="myInput"  />
</div>

jQuery

$(document).ready(function() {

 $(".myText").click(function() { 
  $(this).hide();
  var t = $('.myText').html();
  $('.myInput').val(t);
  $('.myInput').show();
 });

 $(".myInput").blur(function() {  

  $(this).hide();
  var t = $('.myInput').val();
  $('.myText').html(t);
  $('.myText').show();

 });
});

Replace the clicked element with an input with value equal to the clicked element's text

$(document).on('click', '.myText', function() {
  var that = $(this);
  var text = that.text();
  that.wrap('<div id="wrp" />');
  $('#wrp').html('<input type="text" value="' + text + '" />');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myText"> Hellow World </div>

You can try this solution :

$('.myText').click(function(){
  var m = $(this).text();
  $(this).html('');
  $('<input/>',{
    value : m
  }).appendTo(this).focus();
});

$(document).on('blur','input',function(){
  var m = $(this).val();    
  $(this).parent().find('input').remove().end().html(m);

});

working DEMO

$('#text').on('click', function() {
$("#text").hide();
        if ($("#text").text()=="Add New text"){
$('#in_text').val("");
}else{
$('#in_text').val($("#text").text());

}
$("#in_text").show();
            });
        // Handle outside click
$(document).click(function(event) {
            if(!$(event.target).closest('.editable').length) {
         if($("#text").css('display') == 'none'){
        $("#in_text").hide();
        if ($("#in_text").val()==""  ){
        $('#text').text("Add New text");
        $('#text').addClass("asd");
        }else{
        $('#text').removeClass("asd");
        $('#text').text($("#in_text").val());
        }
        $("#text").show();
}
   }
        });

#in_text{
  display:none;
}
.editable{ 
width:50%;

}
.asd{
  border-bottom : 1px dashed #333;
}
#text{
display: inline;   
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editable">
<div id="text" >Text in div</div>
<input type="text" placeholder="Add New Text" id="in_text"/></div>