<template>
  <input
    ref="inputRef"
    :readonly="isIOSReadOnly"
    placeholder="请输入内容"
    border="surround"
    v-model="value"
    @focus="isIOSReadOnly = false"
    @click="handleClick"
    @change="change"
  >
</template>
<script setup>
import { ref, onMounted } from 'vue';
const value = ref('');
const isIOSReadOnly = ref(false)
const inputRef = ref(null)
onMounted(() => {
  // 检测是否为低版本iOS
  const ua = window.navigator.userAgent
  const match = ua.match(/OS (\d+)_(\d+)_?(\d+)?/)
  if (match) {
    const major = parseInt(match[1])
    const minor = parseInt(match[2])
    // iOS 15以下全部加readonly
    if (major < 15) {
      isIOSReadOnly.value = true
    }
  }
})
const handleClick = () => {
  // 手动获取焦点，兼容部分低版本iOS
  inputRef.value && inputRef.value.focus()
}
const change = (e) => {
  console.log('change', e);
};
</script>