MDUI
首页
注册

文本框帮助文本与字数指示器重合

学神之女
举头望涵涵,低头思第一。 https://www.dffzmxj.com
2021-06-28 19:09:52
resize,m_lfit,w_702,h_0,limit_1
<div class="mdui-textfield mdui-textfield-floating-label" style="width: 300.5px;"><!--width 值是图中情况下文本框的宽度-->
    <i class="mdui-icon material-icons">location_city</i>
    <label class="mdui-textfield-label">地址</label>
    <input class="mdui-textfield-input" maxlength="60" required>
    <div class="mdui-textfield-error">地址是必须的</div>
    <div class="mdui-textfield-helper">物理地址、IP地址、网址... 是个“地址”就行</div>
</div>

代码和图片见上,输入框较窄,帮助文本较长,帮助文本会覆盖字数提示。

建议像Material Design设计规范这样,允许帮助文本折行。

目前自己折中的解决办法是不用帮助文本,在文本框下边加个单独的文字提示……