不更改html文本框输入

Dose not change html text box input

本文关键字：输入 文本 html      更新时间：2023-09-26

我使用具有css属性display:none的<input type="file">从文件资源管理器中选择一个文件，但我单击了将触发<input type="file">的<a>标记。Bellow我的HTML和JavaScript:

<!DOCTYPE html>
<html>
<head>
<title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
    <script>
            function BrowseFile() {
                $('.attachmentlabel').val('spooky');
                $('#file-01').click();
                var filePath = $('#file-01').val().split(''''),
                    fileName = filePath[filePath.length - 1];
                if (fileName !== '' && fileName !== undefined) {
                    $('.attachmentlabel').val(fileName);
                }
            }
    </script>
</head>
<body>
    <input type="file" class="hidden-attachment" id='file-01'> @*the hidden field*@
    <input type="text" name="Attachment" class="attachmentlabel"> @*here I want to show the file name*@
     <a  class="btn attachmnentbtn browse" onclick="BrowseFile()">Browse</a>
</body>
</html>

我想做的是，如果我点击<a>，它将调用BrowseFile()，并且该方法将触发<input type="file" class="hidden-attachment"> 上的点击事件

我尝试了上面的代码，但这并没有改变<input type='text'>的文本内容。我该如何解决这个问题，这个的原因是什么

添加此代码：

$(document).ready(function(){
     $("#file-01").change(function () {
          $('.attachmentlabel').val($(this).val())
     });
});

只需处理文件控件的更改事件，并在文本框中更新即可。

检查以下代码

var repassword = "hello";
var password = "hello";
repassword = "hello1";
password = "hello";
function BrowseFile() {
                $('.attachmentlabel').val('spooky');
                $('#file-01').click();
                var filePath = $('#file-01').val().split(''''),
                    fileName = filePath[filePath.length - 1];
                if (fileName !== '' && fileName !== undefined) {
                    $('.attachmentlabel').val(fileName);
                }
            }
$(document).ready(function(){
$("#file-01").change(function () {
     $('.attachmentlabel').val($(this).val())
});
});
.hidden-attachment
{
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="file" class="hidden-attachment" id='file-01'><br>
    <input type="text" name="Attachment" class="attachmentlabel"><br>
     <a  class="btn attachmnentbtn browse" onclick="BrowseFile()">Browse</a>

function BrowseFile() {
      $('#file-01').click();
                $('.attachmentlabel').val('spooky');
                $('#file-01').click();
                var filePath = $('#file-01').val().split('''');
                    fileName = filePath[filePath.length - 1];
                if (fileName !== '' && fileName !== undefined) {
                    $('.attachmentlabel').val(fileName);
                }
    // Add this code in your function
   $('.hidden-attachment').change(function(){    
         var filename = $(this).val();
         $('.attachmentlabel').val(filename);
     });
}

演示

相关文章：