ios端input输入框光标延长问题

最新推荐文章于 2023-09-13 08:46:18 发布

本心_

最新推荐文章于 2023-09-13 08:46:18 发布

阅读量308

点赞数

分类专栏： Web 文章标签： css html

本文链接：https://blog.csdn.net/weixin_40571331/article/details/115921802

版权

Web 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

问题描述：输入框聚焦时，光标的长度不以输入框默认文字高度相等，而是延长至与input输入框父元素高度相等。同样的代码，在浏览器和Android都不会出现此问题，但是在ios的部分机型中出现了。

代码例子：

<!DOCType html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        .out-part {
            background-color: black;
            height: 50px;
            line-height: 50px;
            padding: 8px;
            box-sizing: border-box;
        }

        .panel {
            background-color: white;
            height: 30px;
            width: 200px;
            line-height: 30px;
        }

        .input {
            border: none;
            outline: none;
        }
    </style>
</head>

<body>
    <div class="out-part">
        <div class="panel">
            <input type="text" class="input" placeholder="请输入内容">
        </div>
    </div>
</body>

</html>

我们的代码结构及效果如上所示，咋看之下是没有问题的，但是如果用特定的ios机型（iPhone7）测试，图中的光标长度会直接顶到两边的白框。

原因分析：观察代码，发现input的高度是默认的，如下图所示

我们通过input的父元素(带有类为panel的div)定义空白的高度，以及通过line-height属性控制input居中，在一些ios机型中，光标的高度会跟随父元素的高度显示

解决方案：将父元素的高度设为auto，行高设为normal，针对input框控制其高度、行高样式将值设定为与font-size一致，如此一来光标的高度就会与输入框的输入字体高度相等，再通过margin使得输入框居中，如下代码：

<!DOCType html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        .out-part {
            background-color: black;
            height: auto;
            line-height: normal;
            padding: 8px;
            box-sizing: border-box;
        }

        .panel {
            background-color: white;
            height: 30px;
            width: 200px;
            line-height: 30px;
        }

        .input {
            border: none;
            outline: none;
            height: 16px;
            line-height: 16px;
            font-size: 16px;
            margin: 5px 0;
        }
    </style>
</head>

<body>
    <div class="out-part">
        <div class="panel">
            <input type="text" class="input" placeholder="请输入内容">
        </div>
    </div>
</body>

</html>

最后感谢团队前辈的帮助，遇到这些兼容性问题有时还是挺难解决的，主要原因在于很难定位到具体问题。

本心_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ios端input输入框光标延长问题

问题描述：输入框聚焦时，光标的长度不以输入框默认文字高度相等，而是延长至与input输入框父元素高度相等。同样的代码，在浏览器和Android都不会出现此问题，但是在ios的部分机型中出现了。代码例子：<!DOCType html><html><head> <meta charset="utf-8"> <style> .out-part { background-color:
复制链接

扫一扫

专栏目录