【问题标题】: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】:

我遇到了类似的困境,我通过将&lt;input&gt; 放在&lt;div&gt; 中来解决它,该&lt;div&gt; 的格式类似于离子按钮,如下所示:

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);
  }
}

【讨论】:

    猜你喜欢
    • 2017-07-12
    • 1970-01-01
    • 2019-10-29
    • 1970-01-01
    • 1970-01-01
    • 2015-07-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多