防止水平“滚动”的文字输入？

问题描述

其中一个例子是使用以下模式的日期格式字段： ** ** **** 。当我在输入字段中输入内容时，Chrome在屏幕底部向左滚动。

如何防止此问题？

分隔每个字符的行由背景图片组成。用等宽字体和一组字母间距，每个字符进入字段。如果达到输入字段的大小，它会向前滚动，并将背景与它一起。

为了解决这个问题，我将输入元素放入div元素中，将div元素设置为宽度并向div添加边框和 overflow：none; 。结果：在Firefox中运行正常，Chrome仍然将输入内容滚动到左侧。

我做错了吗？有没有其他解决方案？有没有一个-webkit属性来防止这种情况？

解决方案

我有同样的问题，并找到了一个CSS解决方案：

 < style> 
＃input-wrapper {
 border：1px solid＃C9CFD5; 
 background-image：url（'grid.png'）; / *垂直线的一些平铺图像* / 
 width：200px; 
 height：50px; 
 overflow：hidden; 
} 
＃input-wrapper input {
 border：0 none; 
 width：400px; 
 height：50px; 
背景：透明; 
 font-size：30px; 
 font-family：Courier，等宽; 
 letter-spacing：28px; 
 text-indent：18px; 
} 
< / style> 
< div id =input-wrapper> 
< input type =textmaxlength =4length =4value =1234/> 
< / div> 
  

玩得开心！

I am working on a format input field in html, css and js.

One example would be a date format field with following pattern: **.**.****. When I am typing in the input fields, Chrome "scrolls" to the left when I reach the end of the box.

How can I prevent this?

The lines that separate each char are made by a background image. With a monospaced font and a set letter-spacing each character goes into a "field". If you reach the size of the input field it scrolls forward and takes the background with it.

To resolve this problem, I put the input element into a div element, limited the div element to a width and added borders and overflow: none; to the div. The result: It works fine in Firefox, Chrome still scrolls the input content to the left.

Am I doing this wrong? Is there an other solution for that? Is there a -webkit property to prevent this? Thank you in advance!

解决方案

I had the same issue and found a CSS solution:

<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>

Have fun!

这篇关于防止水平“滚动”的文字输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！