上點擊

Question

編輯HTML文本，我想通過點擊它來改變文字輸入文字： 目前我有：

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

而且在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); 
}); 

但我不噸知道如何改變雙擊簡單的點擊！我嘗試用$ el.click（）替換$ el.dblclick（...），但它不起作用。 有沒有人有解決方案？

Answer 1

當你只需要改變$el.dblclick到$el.click它也將與$(document).click(submitChanges);事件處理。因此$el.click處理程序應返回false以停止進一步的事件處理。

$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/

Answer 2

您可以使用HTML

的 contenteditable屬性

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>