为什么移动端Safari会截断输入表单中的文字? [英] Why does mobile Safari cut off the text in an input form?

问题描述

为什么移动 Safari 上的输入表单内部有更多填充并将文本向右推从而被截断?

我将输入字段的宽度设置为 20 像素，这对于桌面网络来说已经足够了，但在移动设备上需要 >26 像素.

^ 桌面 Safari Web 输入表单 ^

^ 移动 iOS Safari 输入表单 ^

CSS

.phone-input {宽度:20px；文本对齐:居中；字体大小:16px ！重要；高度:1.75em；//边框:0;大纲:0；背景:透明；}

HTML

'
'+'(<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-" autofocus="autofocus"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-">) '+'<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input"name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-">- '+'<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input"name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1"占位符="-">'+'<\/div>'

解决方案

我花了好几个小时才弄明白，但解决方案很简单:

只需使用padding: 0;

(移动 safari 为输入字段添加默认填充)

Why does an input form on mobile Safari have more padding inside it and push the text to the right so it gets cut off?

I set the width of the input field at 20px which is plenty for the desktop web but on mobile it needs >26px.

^ Desktop Safari Web Input Form ^

^ Mobile iOS Safari Input Form ^

CSS

.phone-input {
    width: 20px;
    text-align: center;
    font-size: 16px !important;
    height: 1.75em;
    //border: 0;
    outline: 0;
    background: transparent;
}

HTML

'<div class="phone-field">'+
     '(<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-" autofocus="autofocus"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-">)   '+
     '<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"> - '+
     '<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-">'+
'<\/div>'

解决方案

It took me hours to figure out, but the solution is simple:

Just use padding: 0;

(Mobile safari adds a default padding to input fields)

这篇关于为什么移动端Safari会截断输入表单中的文字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！