解决ios嵌入h5页面中的bug---记录

问题一: ios中input的兼容性问题

问题描述:使用了vux的search组件,在网页显示正常,在ios系统中打开搜索框会变高,并且输入文字,不会显示文字,但是点击搜索会将正确的结果显示出来(可能是由于line-height引起的,给 input 添加一个 line-height:normal属性解决)。

解决:光标聚焦导致变高,具体原因还没找到,所以手写了一个搜索框,具体代码如下。一个原生的input标签,用带action属性的form标签包裹起来,使手机键盘回车按钮提示显示为“搜索”。

<form action="javascript:;" class="searchForm" id="searchForm">
    <label>
        <icon type="search"></icon>
    </label>
    <!-- autocomplete="off" 该属性设置将默认的下拉框显示搜索历史记录去掉; -->
    <input type="search" @keyup.enter="getResult" @input="getResult" autocomplete="off" class="inputSearch" v-model="value" :results="results" placeholder="请输入景区名称">
</form>

问题二:line-height不能居中显示

解决:使用flex布局中的align-items:center垂直居中,或者position+transform/负的margin。也可以将line-height设为normal,再使用padding垂直居中对齐

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章