输入点击事件在具有 ionic 2 和 angular2 的 IOS 设备上不起作用答案

【问题标题】：input click event not working on IOS device with ionic 2 and angular2输入点击事件在具有 ionic 2 和 angular2 的 IOS 设备上不起作用
【发布时间】：2017-03-29 10:52:27
【问题描述】：

我尝试使用 ionic 2 项目上传图片。我需要定制风格，它适用于浏览器、android。但它不适用于 ios 设备。

我尝试设置样式：光标：点。但它也没有醒来。
html:

 <div class="upload-box J_UploadBox"  (click)="fileSelect.click()">
    <input class="J_UploadData" type="hidden" value="">
    <div class="box-do"><ion-icon name="camera"></ion-icon>
      <span class="must-tip" style="display:none"></span></div>
    <div class="J_Views"><span class="tip">upload image</span></div>
  </div>
  </div>
  <div class="J_UploadInput" >
    <input type="file"   #fileSelect  (change)="onChange($event)"  accept="image/*">
  </div>

CSS：

有人知道为什么吗？谢谢

【问题讨论】：

可能fileSelect.click()内部发生了错误...您可以将此功能添加到您的问题中吗？

标签： ios angular input click ionic2

【解决方案1】：

我遇到了类似的困境，我通过将<input> 放在<div> 中来解决它，该<div> 的格式类似于离子按钮，如下所示：

profile.page.html

<div ion-button class="fileUpload">
  <span>Choose Picture</span>
  <input #fileInput class="upload" type="file" (change)="fileChangeListener($event)" />
</div>

profile.page.scss

.fileUpload {
  position: relative;
  overflow: hidden;

  input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
  }
}

【讨论】：