javascript - jquery 文本输入搞笑

Question

我有以下 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个标签开始的!为什么会发生这种情况，我该如何摆脱这种情况？

Answer 1

您可以使用 width:70px;overflow:hidden 将您的输入框包裹在一个 div 中，这样您就可以确保不会看到任何滚动条。