0

クリックしたときにテーブル セルを変更する次の jQuery があります。これにより、ユーザーはテキスト入力を入力し、入力時に通常の状態に戻ることができます<td>。

HTML-

<td class="delivered">
    {{ title.delivery_date|date:"Y-m-d" }}
</td>

JS -

$("td.delivered").click(function () {
    if ($(this).find('#inp').length == 0) {
        var before = $(this).text();
        var title_id = $(this).parent().attr('id');
        var status_type = 'delivery-date'
        $(this).html($("<input/>", {
            id: 'inp',
            style: 'width:70px;',
            placeholder: 'YYYY-MM-DD',
            change: function () {
                selectdone(this, title_id, status_type);
            }
        }));
        $("#inp").focus();
        $('#inp').val(before);
    }
});

上記の js は機能しますが、これには癖があります。

入力要素が70pxなのに、文字幅が200pxくらいでスクロールしてるように見える。これにより、placeholder最初に td をクリックした後に が表示されなくなります。カーソルが常に左にフラッシュされ、テキスト入力が常に70pxになるようにするにはどうすればよいですか。

更新:POSTこれは、テキストを入力して:経由で送信した後の入力の様子ですu'status': [u'\t\t\t\t\t\t\t\t\t\t\t2012-01-01']。つまり、テキスト入力で11個のタブから始まるようです！なぜこれが発生し、どうすればこれを取り除くことができますか?

4

1 に答える 1

1

入力ボックスを div で囲むとwidth:70px;overflow:hidden、スクロールバーが表示されなくなります。

于 2012-06-29T19:56:24.677 に答える