1

私は Asp.net MVC4 アプリケーションに取り組んでいます。ユーザーが自分の情報を編集したい場合に備えて、ユーザーの情報と編集ボタンがあります。

ユーザーは、自分の情報をダブルクリックして編集することもできます。ユーザー名がそこにある場合、ユーザーはそれをダブルクリックして編集できるとします。UserName をクリックするとすぐに、その値をテキストボックスで編集できます。

テキストボックスで値を編集可能にするにはどうすればよいですか?

私は試した-

$(function(){
    $('.double').on('dblclick',function(){
        var val=$(this).html();
        $(this).append('<input type="text" value=val/>');
    });
});

しかし、成功しません。

フィドル

4

4 に答える 4

3

contentEditable 属性を使用してみてください

$(".double").get(0).contentEditable = "true";

contenteditable 属性は、空の文字列、true、および false をキーワードとする列挙型の属性です。空の文字列と true キーワードは true 状態にマップされます。false キーワードは false 状態にマップされます。さらに、3 番目の状態である継承状態があり、これは欠損値のデフォルト (および無効値のデフォルト) です。

デモ1 | デモ2

于 2013-08-06T16:22:53.653 に答える
1

このようにしてみてください：

.replaceWith()を使用します。

$(document).on('dblclick', '.double' function() {
    var val = $(this).text();
    $(this).replaceWith('<input type="text" value="' + val + '" class="username" />');
});

div に戻すには:

$(document).on('blur', '.username', function() {
    var val = $(this).val();
    $(this).replaceWith('<div class="double">' + val + '</div>');
});

デモ

于 2013-08-06T16:28:18.723 に答える
0 
$(function(){
    $('.double').on('dblclick',function(){
        var val=$(this).text();
        $(this).append('<input type="text" value=\"' + val + '\" />');
    });
});
于 2013-08-06T16:26:06.183 に答える
0

val適切に連結するだけです：

$(this).append('<input type="text" value="'+val+'">');

http://jsfiddle.net/asifrc/wKAvs/3/

于 2013-08-06T16:27:32.410 に答える