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。

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

.editable {
  position: relative;
}

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

Answer 3

试试这个：

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

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

使用值等于单击元素的文本

的输入替换单击的元素

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

您可以尝试此解决方案：

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

要做到这一点非常容易和易懂，你也可以制作两个元素而不是改变。工作小提琴：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 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>

单击编辑jquery

8 个答案: