CODEWITHSUNDEEP
javascripthtml
Mln_mcsn
Mln_mcsn

Reputation: 17

Edit HTML text on click

I would like to change text to input text by clicking on it : Currently I've:

<div class="wrapper">
    <span class="text-content">Double Click On Me!</span>
</div>

And in javascript:

//plugin to make any element text editable
$.fn.extend({
    editable: function () {
        $(this).each(function () {
            var $el = $(this),
            $edittextbox = $('<input type="text"></input>').css('min-width', $el.width()),
            submitChanges = function () {
                if ($edittextbox.val() !== '') {
                    $el.html($edittextbox.val());
                    $el.show();
                    $el.trigger('editsubmit', [$el.html()]);
                    $(document).unbind('click', submitChanges);
                    $edittextbox.detach();
                }
            },
            tempVal;
            $edittextbox.click(function (event) {
                event.stopPropagation();
            });

            $el.dblclick(function (e) {
                tempVal = $el.html();
                $edittextbox.val(tempVal).insertBefore(this)
                .bind('keypress', function (e) {
                    var code = (e.keyCode ? e.keyCode : e.which);
                    if (code == 13) {
                        submitChanges();
                    }
                }).select();
                $el.hide();
                $(document).click(submitChanges);
            });
        });
        return this;
    }
});

//implement plugin
$('.text-content').editable().on('editsubmit', function (event, val) {
    console.log('text changed to ' + val);
});

But I don't know how to change double click on simple click ! I've tried to replace $el.dblclick(...) by $el.click(), but it doesn't work. Is anybody have a solution ?

Upvotes: 0

Views: 1817

Answers (2)

Charkan
Charkan

Reputation: 831

You may use the contenteditable attribute of html

var initialContent = $('.text-content').html();

$('.text-content')
.on('blur', function(){
  if(initialContent != $(this).html())
      alert($(this).text());
  if($(this).html() == ''){
    $(this).html(initialContent);
  }
})
.on('click', function(){
   if(initialContent == $(this).html()) {
     $(this).html('');
   }
});;
.text-content {
  border: 1px solid black;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
    <span contenteditable="true" class="text-content">Click On Me!</span>
</div>

Upvotes: 0

phts
phts

Reputation: 3915

When you just change $el.dblclick to $el.click it will also handled with $(document).click(submitChanges); event. So $el.click handler should return false to stop further event processing.

$el.click(function (e) { // <---------- click
  tempVal = $el.html();
  $edittextbox.val(tempVal).insertBefore(this).bind('keypress', function (e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) {
      submitChanges();
    }
  }).select();
  $el.hide();
  $(document).click(submitChanges);
  return false; // <------------------------ stop further event handling
});

http://jsfiddle.net/zvm8a7cr/

Upvotes: 2

Related Questions