Question

我在编码内联可编辑字段时遇到问题。一切似乎工作正常，但当我再次在输入字段中单击时，现有文本消失。我无法弄清楚什么是问题。

var name;

$('span#editable').click(function(){
    name=$(this).text();
    $(this).html('');
    $('<input>')
        .attr({
            'type': 'text',
            'name': 'fname',
            'id': 'inlineEditableText',
            'size': '30',
            'value': name
        })
        .appendTo('#editable');
    $('#inlineEditableText').focus();
});

var delayTimer = ''; // this is used when browsers like Chrome and Safari call the blur event twice
$(document).on('blur','#inlineEditableText', function() {
    //alert("blur");
    if (delayTimer == '') delayTimer = setTimeout(calledAfterDelay, 50);
});

function calledAfterDelay() {
    if($("#inlineEditableText").val() != ""){
        $.ajax({
            url: Config.baseUrl + 'some.php',
            type: 'PUT',
            data: JSON.stringify({
                "id" :<?= $selectedSpace->getId(); ?> ,
                "name" :$("#inlineEditableText").val()
            }),
            dataType : 'json',
            success: function(data) {
                Sapphire.Utilities.flashSuccess("Space renamed!");
            }
        });
    } else {
        Sapphire.Utilities.flashError('Please enter name'); 
    }   
    $('#editable').text(name);
    delayTimer = ''; // reset the timer so that the method can be run again
}

$(document).on('keyup','#inlineEditableText', function(e){  
    name = $(this).val();
    if(e.keyCode==13 || e.keyCode==27){
        $('#inlineEditableText').blur();
        name = $(this).val();
    }
});`

Answer 1

这行代码存在问题

  name=$(this).text();//this will return you text of span element not of input element 
    $(this).html('');//this clears your span element

因此，如果你想预先输入input元素的文本，你需要像这样输入input元素的文本

name = $('span#editable>input[type="text"]').val();

将此文本值分配给您最后提出的输入元素

所以最后的代码将是

$('span#editable').click(function(){
    name = $('span#editable>input[type="text"]').val();
    $(this).html('');
    $('<input>')
        .attr({
            'type': 'text',
            'name': 'fname',
            'id': 'inlineEditableText',
            'size': '30',
            'value': name
        })
        .appendTo('#editable');
    $('#inlineEditableText').focus();
});

更新

var name;
    $('#editable').click(function(){
        name=$(this).text();
        if(($('span#editable > input[type=text]')).length>0)
        {
            name = $('span#editable>input[type=text]').val();
        }

        $(this).html('');
        $('<input>')
            .attr({
                'type': 'text',
                'name': 'fname',
                'id': 'inlineEditableText',
                'size': '30',
                'value': name
            })
            .appendTo('#editable');
        $('#inlineEditableText').focus();
    });

var delayTimer = ''; 
    $(document).on('blur','#inlineEditableText', function() {
        if (delayTimer == '') delayTimer = setTimeout(calledAfterDelay, 50);
    });

    function calledAfterDelay() {
        alert("calledafterdelay");
    }

    $(document).on('keyup','#inlineEditableText', function(e){  
        name = $(this).val();
        if(e.keyCode==13 || e.keyCode==27){
            $('#inlineEditableText').blur();
            name = $(this).val();
        }
    });

完整工作和更新的代码：jsFiddle

Answer 2

感谢所有#gurus的答案。我已经解决了。我刚刚检查输入字段是否已经存在然后不附加它。

var name;
$('span#editable').click(function(){
    if ($('span#editable').find('#inlineEditableText').length == 0)//this check does the job
    {
    name=$(this).text();
    $(this).html('');
    $('<input>')
        .attr({
            'type': 'text',
            'name': 'fname',
            'id': 'inlineEditableText',
            'size': '30',
            'value': name
        })
        .appendTo('#editable');
    $('#inlineEditableText').focus();
}
});

再次单击元素时清除文本

2 个答案:

更新