Question

我正在尝试动态更改文本框的宽度，该文本框显示在文件对话框中选择的文件名，因为某些文件名很长。下面显示的代码不会改变我尝试使用width属性的文本框（SelectedFile）的大小，但无济于事。似乎有些事情压倒了我的变化。

给出以下html

<div class="input-group">
    <label class="input-group-btn">
        <span class="btn btn-primary">
            Browse&hellip; <input type="file" style="display: none;" >
        </span> 
    </label>
    <input id="SelectedFile" type="text" class="form-control" readonly >
</div>

以下jQuery

<script type="text/javascript">
        $(function () {
            //attach the `fileselect` event to all file inputs on the page
            $(document).on('change', ':file', function () {
                var input = $(this),
                    numFiles = input.get(0).files ? input.get(0).files.length : 1,
                    label = input.val().replace(/\\/g, '/').replace(/.*\//, '');

                input.trigger('fileselect', [numFiles, label]);
            });

            // Watch for our custom `fileselect` event
            $(document).ready(function () {
                $(':file').on('fileselect', function (event, numFiles, label) {

                    var input = $(this).parents('.input-group').find(':text'),
                        log = numFiles > 1 ? numFiles + ' files selected' : label,
                        fileLength = (label.length * 8) + 50;

                    if (input.length) {
                        input.val(log);
                    } else {
                        if (log) alert(log);
                    }
                    var newWidth = fileLength.toString() + 'px;';                        
                    $('#SelectedFile').css({ maxWidth: newWidth });
                });
            });
        });
</script>

Answer 1

maxWidth 仅定义元素可以拥有的最大宽度。它不定义实际宽度，该宽度由宽度属性定义。

文本框包含在具有类＆＃34; input-group＆＃34;的元素中。容器上的属性可能会影响孩子。如果没有看到样式表，很难确切地说明为什么会覆盖宽度。

Answer 2

您可以使用$('#SelectedFile').attr('style','width:'+ newWidth );设置宽度并动态更改

＆＃13;

$(function () {
            //attach the `fileselect` event to all file inputs on the page
            $(document).on('change', ':file', function () {
                var input = $(this),
                    numFiles = input.get(0).files ? input.get(0).files.length : 1,
                    label = input.val().replace(/\\/g, '/').replace(/.*\//, '');

                input.trigger('fileselect', [numFiles, label]);
            });

            // Watch for our custom `fileselect` event
            $(document).ready(function () {
                $(':file').on('fileselect', function (event, numFiles, label) {

                    var input = $(this).parents('.input-group').find(':text'),
                        log = numFiles > 1 ? numFiles + ' files selected' : label,
                        fileLength = (label.length * 8) + 50;

                    if (input.length) {
                        input.val(log);
                    } else {
                        if (log) alert(log);
                    }
                    var newWidth = fileLength.toString() + 'px;'; 
                    $('#SelectedFile').attr('style','width:'+ newWidth );
                });
            });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
    <label class="input-group-btn">
        <span class="btn btn-primary">
            Browse&hellip; <input type="file" style="display: none;" >
        </span> 
    </label>
    <input id="SelectedFile" type="text" class="form-control" readonly >
</div>

＆＃13;

Answer 3

对我有用的两件事：

var newWidth = fileLength.toString() + 'px';

删除';'在'px'之后

$('#SelectedFile').css({ 'max-width': newWidth });

这是max-width属性。

使用jQuery动态设置文本框宽度不起作用

3 个答案: