我正在处理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>
玩得开心!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。