选择文件后取消焦点文件输入框（以验证输入）

Posted 2023-05-09

【中文标题】选择文件后取消焦点文件输入框（以验证输入）

【英文标题】：Un-focus file input box AFTER file got selected (to validate input)

【发布时间】：2021-04-16 00:59:13

【问题描述】：

我有一个带有文件输入框的引导表单，在提交之前会在客户端站点上检查有效扩展名。

<div class = "container", id="container">
<form id= "fileinput-form" action="/file" method="POST" >
  <div class="form-group col-md-4" >
   <input class="form-control" type="file" accept=".csv,.txt" name="inputfile" aria-label="file example">
  </div>
  <div style="margin-top:10px">
   <input class="btn btn-primary" id="submit-file" type="submit" value="Predict">
  </div>
</form>
</div> 

但是，验证只是在输入框未聚焦（或者更确切地说是通过单击某处）之后触发。不过，我希望在关闭 Windows 对话框（选择文件）后立即进行验证，而无需取消输入框的焦点。

$("#fileinput-form").validate(

      rules:
          inputfile: 
          required: true,
          extension: true
          
      ,
      messages:
          inputfile:
          required: "Please input a file."
          
      ,

 ););

我已经尝试添加onchange函数，没有任何成功...有什么解决办法吗？

$("#fileinput-form").on("change",function(e)  
     console.log('file changed'); 
     $("#fileinput-form").trigger('blur');
     /*$("hidden-input").focus();*/
);

【参考方案1】：

对于可能也遇到该问题的任何人，这里有一个可以很好地完成工作的可行解决方案：

在 html 中添加一个空的div。

<div id="eventresponse"> </div>

将文本交给div。

$("#inputfile").bind("change",function()
      $("#eventresponse").text("Input text here");
);

添加新样式

#eventresponse
  color: red;
  font-style: italic;
  

eventresponse 只会在 Windows 对话框关闭时触发并弹出。

注意： 由于我对 javascript 不太熟悉，因此我使用异步在服务器站点（flask）上实现了实际验证。接电话。当然，纯 javascript 有一个更简单的解决方案。