0

編集可能なテキストを作成しようとしています。私が持っているのは、クリックしたテキスト行です。ユーザーがテキストの値を変更できるように、テキストボックスを表示する必要があります。私が持っているコードでは、クリックするとテキストが消えます。何か案は？html

       <div class="test">Click here</div>

jquery

       $(".test").click(function() {
           var inputValue = $(".test").text();  
           $(".test").html("<input value='"+inputValue+"' 
               type='text' id='box1'>");
           $("#box1").val(inputValue).select();
        });
4

3 に答える 3

1

おそらく、既存のソリューションを使用する方が簡単でしょう。例：jeditable

ただし、必要に応じて（デモを参照）：

$(document).ready(function () {
    var beginEdit = function () {
        var text = $(this).text();
        var input = $('<input value="' + text + '" type="text">').one('blur', endEdit);

        $(this).empty().append(input);
    };

    var endEdit = function () {
        var text = $(this).val();
        $(this).parent().html(text).one('click', beginEdit);
    };

    $(".text").one('click', beginEdit);
});​

jQueryのプラグインとして（DEMO2を参照）：

$.fn.editable = function () {
    this.each(function () {    
        var beginEdit = function () {
            var text = $(this).text();
            var input = $('<input value="' + text + '" type="text">').one('blur', endEdit);

            $(this).empty().append(input);
        };

        var endEdit = function () {
            var text = $(this).val();
            $(this).parent().html(text).one('click', beginEdit);
        };

        $(this).one('click', beginEdit);        
    });
};

$(document).ready(function () {
    $(".text").editable();
});​
于 2012-07-31T15:38:31.553 に答える
0

このjsFiddleには例があります。段落をクリックすると、jQueryイベントハンドラーが段落内のHTMLを段落のテキストを含むテキストボックスに置き換えます。

新しく作成したテキストボックスをクリックすると、その中のテキストが消えます。これは、テキストボックスをクリックすると、イベントハンドラーが再度起動するためです。段落のHTML（テキストボックス）が、段落のテキストを含むテキストボックスに置き換えられます。テキストがないので、新しい空のテキストボックスが表示されます。

これを防ぐ方法はいくつかあります。テキストボックスを作成するときに、段落のクラスを変更できます。つまり、イベント処理コードは起動しなくなります。または、テキストボックスのクリックイベント用に別のハンドラーを作成して、ここでstopPropagation関数を呼び出すこともできます。

于 2012-07-31T15:46:37.727 に答える
0

行を取り去ります$("#box1").val(inputValue).select();。html()メソッドに値を設定済みです。また、デバッガーでinputValueに値があることを確認してください。

グラハムが指摘したのは、クリックすると次のようになるということです。 

<div class="test"><input value="Click here" type="text" id="box1"></div>

クリックイベントがまだ外側のdivにあるので、もう一度クリックするとテキストボックスがクリアされます。

于 2012-07-31T15:44:47.733 に答える