safari如何选择html5,Safari HTML5 Feature

iOS 设备上 HTML5 的一些 feature

iOS 设备上音频无法自动播放：Safari developer

Vue.Js 的 click 也无法让音频播放：Vue.js nextTick issues

主要原因是：

iOS requires user input for showing keyboard. Before Vue uses micro task so user click counts as a valid trigger for keyboard. However, in 2.5 we uses macro task so iOS no longer treats it as trigger.

这个 feature 目前导致的问题：

使用 Vue.js 的 click 事件无法让一个 input / textarea 的状态变成 focus

使用 Vue.js 的 click 事件无法让一个媒体资源开始播放

focus 解决方法：

// 使用原生 Js 来监听 button 的 click 事件，让可输入区域 focus

hackFocus ({ source, target, event, statement }) {

if (!(source instanceof Element) || !(target instanceof Element) || !statement) {

return

}

source.addEventListener(event, function () {

target.style.display = 'block'

target.focus()

})

}

遗漏问题：

如果触发可输入区域 focus 的 button 只有一个，那么这种实现方案还是可以接受的

如果有多个 button，并且这些 button 是动态追加到 DOM 中的(翻页)，那就很复杂了

首先它会导致代码难以维护，点击不同 button 它触发的事件参数都是不同的，statement 也是不同的

所以目前想到的方法是使用事件委托，并且使用HTML原生的 data-xxx 属性来做 statement

// 这里简单的用 commentAble 代替 statement

if (commentAble) {

const input = document.getElementById('comment');

[].forEach.call(document.querySelectorAll('.comments-wrap'), (wrap) => {

wrap.addEventListener('click', (e) => {

if (/(reply-btn|ic-comment)/.test(e.target.className)) {

window.__drawer_pos = window.scrollY // 记录focus前窗口的距离顶部的高度

input.style.display = 'block'

input.focus()

}

})

})

}

media 解决方案：

不要使用 Vue.js，使用原生的方案

// 绑定原生事件

[].forEach.call(document.querySelectorAll('.audio-item'), item => {

item.addEventListener('click', () => {

// 调用 vue 的 method 处理 state 并播放

this.playing()

})

});

遗留问题：

页面复杂后代码很难维护，特别是要支持 SSR 并且要支持 App 内调用另一种播放策略时

[TODO]如何自动播放下一首？