如何使大文本字段的文本框更宽

Question

我有桌子，我使用内联编辑来编辑表格，我的问题是文本框大小很常见 对于所有的TD， 例如

如果td很小，则文本框看起来像这样

如果td很大，则文本框看起来像这样

任何人都可以帮助我如何使文本框更广泛 对于大文本字段和更小 对于小文本字段， 下面是我的代码

< script >

$(document).ready(function () {
    $('td.edit').click(function (e) {

        var $target = $(e.target);
        if ($target.is('#editbox')) {
            return;
        }
        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
        $(this).addClass('ajax');
        $(this).html('<input id="editbox"  size="10" type="text" value="' + $(this).text() + '">');

        $('#editbox').select();

    });

    $('td.edit').keydown(function (event) {
        arr = $(this).attr('class').split(" ");
        if (event.which == 13) {
            $.ajax({
                type: "POST",
                url: "supplier/update.php",
                data: "value=" + $('.ajax input').val() + "&rowid=" + arr[2] + "&field=" + arr[1],
                success: function (data) {
                    $('.ajax').html($('.ajax input').val());
                    $('.ajax').removeClass('ajax');
                }
            });
        }
    });

    $('#editbox').live('blur', function () {
        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
    });
}); < /script>

更新

现在看起来像

Answer 1

你可以用css：

来做

input[type=text]{
width:100%;
}

Answer 2

在文本框中添加样式

this $(this).html('<input style="width:100%; box-sizing: border-box;" id="editbox"  size="10" type="text" value="' + $(this).text() + '">');

或 CSS

input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
 }

要在mozilla中使用此样式，您应该添加-moz-box-sizing: border-box;

Answer 3

问题是输入有边距，边框和填充，如果你删除它没有突破的所有那些但你也看不到输入，除非你改变它的背景颜色。 VisionN的盒子大小应该（并且实际上将）解决您的问题

input {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

这是一个小提琴：http://jsfiddle.net/8nk3T/1/

或者如果你想用js / jQuery

做

$(this).html('<input id="editbox" style="width:100%; -moz-box-sizing: 'border-box'; -webkit-box-sizing: 'border-box'; box-sizing: 'border-box';" size="10" type="text" value="' + $(this).text() + '">'); 

或

$(this).html('<input id="editbox"  size="10" type="text" value="' + $(this).text() + '">').find('input').css({
    'width': '100%',
    '-moz-box-sizing': 'border-box',
    '-webkit-box-sizing': 'border-box',
    'box-sizing': 'border-box'
});

编辑：添加供应商前缀