Предотвратить горизонтальную «прокрутку» ввода текста? - PullRequest
Новая
       6

Предотвратить горизонтальную «прокрутку» ввода текста?

10 голосов
/ 22 января 2012

Я работаю над полем ввода формата в html, css и js.

Одним примером будет поле формата даты со следующим шаблоном: **.**.****.Когда я печатаю в полях ввода, Chrome «прокручивает» влево, когда достигаю конца поля.

Как я могу предотвратить это?

enter image description here

Линии, которые разделяют каждый символ, сделаны фоновым изображением.С моноширинным шрифтом и набором letter-spacing каждый символ уходит в «поле».Если вы достигнете размера поля ввода, оно прокручивается вперед и берет фон с ним.

Чтобы решить эту проблему, я поместил элемент ввода в элемент div, ограничил элемент div шириной и добавил границыи overflow: none; до див.Результат: в Firefox он работает нормально, Chrome все еще прокручивает входной контент влево.

Я делаю это неправильно?Есть ли другое решение для этого?Есть ли свойство -webkit, чтобы предотвратить это?Заранее спасибо!

Ответы [ 4 ]

5 голосов
/ 27 ноября 2012

У меня была такая же проблема, и я нашел решение CSS: 

  #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;
  }
<div id="input-wrapper">
  <input type="text" maxlength="4" length="4" value="1234" />
</div>

Веселись!

3 голосов
/ 13 июня 2012

Спасибо за совет с оберткой, у меня была такая же проблема в Firefox. В Chrome я исправил это, используя JS и метод scrollLeft (который не будет работать в ff с другой стороны). В jQuery: 

$('input').live('keyup', function() {
    $(this).parent().scrollLeft(0);
});
0 голосов
/ 28 апреля 2014

я использовал следующее решение:

HTML 

<div id="input-wrapper">
    <div id="input-grid">
    <input type="text" id="targa" maxlength="5" length="5" value="" />
</div>

JS 

jQuery(document).ready(function($){
  $('#targa').on('keypress', function() {
    if (this.value.length >= 4){
        return false;
    }  
  });
});

CSS 

  #input-wrapper {
      position: relative;
  }
  #input-grid{
    border: 1px solid #C9CFD5;
    background-image: url('../images/input-mask.jpg'); 
    width: 200px;
    height: 50px;
  }
  #targa {
    color:#fff;
    text-transform:uppercase;
    border: 0 none;
    width: 400px;
    height: 50px;
    background: transparent;
    font-size: 30px;
    font-family: "Courier", monospace;
    letter-spacing: 28px;
    text-indent: 18px;
    outline: 0;
    position: absolute;
    top: 0;
    left: 0;
  }

Пример работы с jsfiddle

Пример работы с jsfiddle (полный экран)

0 голосов
/ 22 января 2012

Webkit идет вверх ногами, чтобы показать вам, что вы печатаете, даже если вы делаете преобразования CSS, он не скрывает курсор ввода текста.

Это также плохой пользовательский опыт, чтобы скрывать то, что вы печатаете, это очень смущает, и вы не узнаете, правильно ли вы ввели.

Я бы предложил ограничить количество символов, которые вы можете поместить в каждое поле, например ... 

<input type="text" maxlength="20" />

Если вам действительно нужно произвольное количество символов, вы можете прослушать событие keyup на поле и затем динамически увеличивать его.

...