分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 为什么隐藏文件输入时选择错误？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我100％肯定这段代码有效,但在一个特例中它失败了 – 花了一个小时来找到bug(无法在JSfiddle上重现它).最后我找到了原因,但我不知道为什么会这样.它只在我隐藏文件输入时才会发生,结果是：无论选择和更改我更改第一个标签的文件,请看一下：

var activateFileSELEction = function( container ) {
    var container = container || $('body');
    container.find(':file').each(function(i) {
        var thisInput = $(this);
        var thisLabel = thisInput.siblings('label');
        if (thisLabel.length > 0 && !thisLabel.hasClass('file-input-label')) {
            var thisLabelDefaultText = thisLabel.html();
            thisLabel.addClass('file-input-label');
            thisInput.on('change',function(E) {
                if (thisInput.val()) {
                    thisLabel.html(thisInput.val());
                } else {
                    thisLabel.html(thisLabelDefaultText);
                };
            });
        };
    });
};
activateFileSELEction();

input {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <label for="myfile">SELEct 1</label>
    <input id="myfile" type="file" />
</div>
<div>
    <label for="myfile">SELEct 2</label>
    <input id="myfile" type="file" />
</div>
<div>
    <label for="myfile">SELEct 3</label>
    <input id="myfile" type="file" />
</div>

也在JSFiddle.

如果没有隐藏输入,一切正常：fiddle.

正如下面提到的nevermind,重复的输入ID可能存在问题,仍然在脚本中我没有解决和ID.此外,每个文件输入的更改会触发标签文本的更改,但错误的更改.

解决方法

HTML代码的布局可能表明每个标签都链接到它旁边的输入字段,但事实并非如此.由于三个标签的for属性是“myfile”,因此所有三个标签实际上都链接到第一个输入字段,即使用document.getElementById(“myfile”)找到的字段.

因此,单击任何标签时,将使用第一个输入字段.在文件选择之后,将更新代码中使用thisInput.siblings(‘label’)获得的相邻标签.即使3个输入字段可见,也是如此.

另一方面,如果直接单击输入字段,则使用该输入字段并更新相应的标签.

以下代码段向控制台发送一条消息,指示使用了哪个文件输入.

var activateFileSELEction = function (container) {
    var container = container || $('body');
    container.find(':file').each(function (i) {
        var thisInput = $(this);
        var thisLabel = thisInput.siblings('label');
        if (thisLabel.length > 0 && !thisLabel.hasClass('file-input-label')) {
            var thisLabelDefaultText = thisLabel.html();
            thisLabel.addClass('file-input-label');
            thisInput.on('change',function (E) {
                console.log("Input used: " + thisInput.data("field"));
                if (thisInput.val()) {
                    thisLabel.html(thisInput.val());
                } else {
                    thisLabel.html(thisLabelDefaultText);
                };
            });
        };
    });
};
activateFileSELEction();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Test by clicking on label 3 vs clicking on input field 3:</p>
<div>
    <label for="myfile">SELEct 1</label>
    <input id="myfile" type="file" data-field="input1" />
</div>
<div>
    <label for="myfile">SELEct 2</label>
    <input id="myfile" type="file" data-field="input2" />
</div>
<div>
    <label for="myfile">SELEct 3</label>
    <input id="myfile" type="file" data-field="input3" />
</div>