点击编辑jquery

Question

我是新手，所以我的问题非常简单直接。

我有一个简单的 html 文本。当我单击该 html 文本时，文本应更改为保留值的输入字段，当用户在文本框外单击时，输入文本字段现在应更改为 html 文本。

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

有人可以在 jquery/Meteor 中做到这一点吗？我实际上正在构建一个流星项目

Answer 1

您可以通过contenteditable attribute 做到这一点

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

Answer 2

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();
            }
        });
    });
});

在我的解决方案中，您需要将 class="editable" 添加到所有可编辑的 div 中。

您还需要为这些 div 设置 position: relative。也许您可以更新我的代码并编辑 css：

.editable {
  position: relative;
}

要正确对齐div内的input，需要去掉边框或者将输入的.css({})设置为left: -1px和top: -1px。边框实际上将输入向左推 1px，从顶部推 1px。

Answer 3

试试这个：

$(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.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="myText">Hello world</div>
<div class="myText">This is second</div>

Answer 4

试试这个：

$(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.

Answer 5

要做到这一点非常容易且易于理解，您还可以制作两个元素而不是更改。 工作小提琴：http://jsfiddle.net/45utpzhx/

它执行 onClick 事件和 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();

 });
});

Answer 6

用值等于被点击元素的文本的输入替换被点击的元素

$(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.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myText"> Hellow World </div>

Answer 7

你可以试试这个解决方案：

$('.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);

});

工作DEMO

Answer 8

$('#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.com/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>