html – 防止文本输入的水平“滚动”？
发布时间：2020-12-14 18:34:41 所属栏目：资源 来源：网络整理
导读：我正在处理html,css和js中的格式输入字段. 一个例子是具有以下模式的日期格式字段：**.**.****.当我在输入字段中输入内容时,当我到达框的末尾时,Chrome会“向左滚动”. 我怎么能阻止这个？ 分隔每个字符的行由背景图像构成.使用等宽字体和设置字母间距,每个
|
我正在处理html,css和js中的格式输入字段.
一个例子是具有以下模式的日期格式字段：**.**.****.当我在输入字段中输入内容时,当我到达框的末尾时,Chrome会“向左滚动”. 我怎么能阻止这个？ 分隔每个字符的行由背景图像构成.使用等宽字体和设置字母间距,每个字符进入“字段”.如果达到输入字段的大小,它会向前滚动并使用背景. 为了解决这个问题,我将input元素放入div元素,将div元素限制为宽度并添加边框和overflow：none;到了div.结果：它在Firefox中工作正常,Chrome仍然将输入内容滚动到左侧. 我做错了吗？还有其他解决方案吗？是否有一个-webkit属性来防止这种情况？先感谢您！ 解决方法
我有同样的问题,并找到了一个CSS解决方案：
<style>
#input-wrapper {
border: 1px solid #C9CFD5;
background-image: url('grid.png'); /* some tile image for the vertical lines */
width: 200px;
height: 50px;
overflow: hidden;
}
#input-wrapper input {
border: 0 none;
width: 400px;
height: 50px;
background: transparent;
font-size: 30px;
font-family: "Courier",monospace;
letter-spacing: 28px;
text-indent: 18px;
}
</style>
<div id="input-wrapper">
<input type="text" maxlength="4" length="4" value="1234" />
</div>
玩得开心！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |