Question

我有一个带文本的跨度，如果访问者点击文本，我想用jquery监听它应该用输入字段替换该文本（从开始隐藏）。如果访问者将输入字段留空并将其置于焦点之外，则应隐藏输入并再次显示文本。

帮助将不胜感激。

编辑：

这是我目前的代码：

$("span").click(function() {
 $(this).hide();
 $("input").toggle();  
});

Answer 1

试试这个：

 $(function () {
   $(document).on('click', 'span', function () {
    var input = $('<input />', {
        'type': 'text',
            'name': 'unique',
            'value': $(this).html()
    });
    $(this).parent().append(input);
    $(this).remove();
    input.focus();
});

 $(document).on('blur', 'input', function () {
    $(this).parent().append($('<span />').html($(this).val()));
    $(this).remove();
});
});

<强> Fiddle

Answer 2

试试这段代码：

<强> DEMO

   $("span").click(function(){
    $("input").show().change(function(){
       $("span").show(); 
       $(this).hide();
    });
     $(this).hide();

    });

Answer 3

您在寻找contenteditable span吗？

设置您的范围contenteditable="true"

检查小提琴。 JSFiddle

Answer 4

如果你在DOM中移动东西，则无需创建隐藏元素。您可以使用jQuery的.replaceWith()以更少的代码执行此操作。

$('body').on('click', '#mySpan', function (event) {
  $( this ).replaceWith( "<input id='myInput' type='text' />" );
  $('#myInput').focus();
});

$('body').on('focusout', 'input', function (event) {
    if($(this).val() == ""){
    $( this ).replaceWith( "<span id='mySpan'>Sample Text</span>" );
    }
});

小提琴 - http://jsfiddle.net/jX7rM/2/

Jquery单击时将文本切换到输入字段

4 个答案: