Question

我目前正忙于使用web-service与ajax/json合作。

我正在检索所有values，但现在我希望用户更新其详细信息。

我想知道，如何将输入字段value="?"更改为用户当前正在键入的文本（实时）？

我所做的是，我使用网络服务检索的实际数据填充标签。

当您点击'Update Details'时，我的jQuery代码会将标签更改为输入字段，现在唯一的问题是我想在输入时填充用户文字，抓住这些值并发送回到网络服务。

这是我的代码。（表格）

<form>
        <table class="table AccountDetails">
            <tr>
                <td>Account holder:</td>
                <td><label id="AccountHolder" class="editable"></label></td>
            </tr>
            <tr>
                <td>Primary email:</td>
                <td><label id="PrimaryEmail" class="editable"></label></td>
            </tr>
            <tr>
                <td>Contact number:</td>
                <td><label id="ContactNumber" class="editable"></label></td>
            </tr>
            <tr>
                <td>Terms and conditions:</td>
                <td>
                    <table>
                        <tr>
                            <td><label id="TCs" class="editable"></label></td>
                            <td>&nbsp;<label id="TCsDateAccepted"></label></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="left">
                    <a class="btn btn-default" id="updateDetails" href="#">Update Details</a>
                </td>
                <td align="right"><a class="btn btn-default" href="#">Review T&amp;C's</a></td>
            </tr>
        </table>
</form>

这是我的jQuery代码：

$（“＃updateDetails”）。click（function（）{ var $ this = $（this）;

if($this.attr('editing') != '1') {
    $this.attr('editing', 1);
    $(document).find('.editable').each(function() {
        var input = $('<input class="editing" value="'+$(this).text()+'" />');
        //input.val($(this).text());
        $(this).replaceWith(input);
        console.log( $(input).val());
    });
}
else {
    $this.removeAttr('editing');
    $(document).find('input.editing').each(function() {
        var div = $('<div class="editable" />').text($(this).val());
        console.log( $('.editing').val());
        $(this).replaceWith(div);
    });
}

}）;

我希望我在这里有意义。如果有任何不清楚的地方，请询问。

Answer 1

据我所知，您希望输入和一些文本在输入更新时更新。这可能会对您有所帮助：

var $text = $('#text');
var $input = $('#input');
$input.on('keyup', function () {
  $text.html($input.val());
});

通过一个小技巧，你可以使它更具响应性：

var $text = $('#text');
var $input = $('#input');
$input.on('keydown', function () {
  setTimeout(function () {
    $text.html($input.val());
  }, 0); // On next loop
});

这是一个小小提琴：http://jsbin.com/luzidaro/1/edit

Answer 2

我设法通过替换以下行来解决此问题

var input = $('<input class="editing" />').val($(this).text());

带

var input = $('<input class="editing" value="'+$(this).text()+'" />');

实时输入字段值随用户类型而变化

2 个答案: