单击即可编辑HTML文本

Edit HTML text on click

本文关键字：HTML 文本 编辑 单击      更新时间：2023-09-26

我想通过点击将文本更改为输入文本：目前我有：

<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（…），但它不起作用。有人有解决方案吗？

当您刚刚将$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/

您可以使用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>

相关文章：