When using el-select, a search function filterable is usually added to allow users to quickly and easily find the options they want. On the PC side and mobile Android phones, it can be displayed normally. On the ios side, we found that it can be obtained Focus, but cannot activate the soft keyboard, how to solve it?
Viewing the dom node through the console, you can find that readonly is added to the input input box. If you want to solve the above problem, then remove readonly, as follows:
<el-select
ref="select"
@hook:mounted="cancalReadOnly"
@visible-change="cancalReadOnly"
filterable
allow-create
v-model="tvBrand"
placeholder="Enter and select the brand of your TV (required)">
<el-option v-for="item in brandData" :key="item" :label="item" :value="item">
</el-option>
</el-select> cancalReadOnly(onOff) {
this.$nextTick(() => {
if (!onOff) {
const { select } = this.$refs;
const input = select.$el.querySelector('.el-input__inner');
input.removeAttribute('readonly');
}
});
},That’s the perfect solution! !
The above mainly binds the following methods. When the input box is mounted and changed, the method is called to remove readonly, perfect!
