Zapobieganie poziomemu "przewijaniu" wprowadzania tekstu?

Question

Pracuję nad polem wprowadzania formatu w html, css i js.

Jednym z przykładów może być pole formatu daty o następującym wzorze: **.**.****. Kiedy piszę w polach wprowadzania, Chrome "przewija" w lewo po dotarciu do końca pola.

Jak mogę temu zapobiec?

Linie, które oddzielają każdą char są przez obraz tła. Za pomocą czcionki o stałej szerokości i zestawu letter-spacing każda postać przechodzi w "pole". Jeśli osiągniesz rozmiar pola wejściowego, przewinie się do przodu i zabierze z niego tło.

Aby rozwiązać ten problem, wstawiłem element wejściowy do elementu div, ograniczyłem element div do szerokości i dodałem granice oraz overflow: none; do elementu div. Wynik: działa dobrze w Firefoksie, Chrome wciąż przewija zawartość wejściową po lewej stronie.

Czy robię to źle? Czy istnieje inne rozwiązanie? Czy istnieje właściwość -webkit, aby temu zapobiec? Z góry dziękuję!

Answer 1

Moduł Webkit kładzie się po piętach, aby pokazać, co piszesz, nawet jeśli dokonasz transformacji CSS, to nie ukryje to wprowadzania tekstu.

Zabronione jest także ukrywanie tego, co piszesz, byłoby bardzo niepokojące i nie wiedziałbyś, czy wpisałeś je poprawnie.

Proponuję aby ograniczyć ilość znaków, które można umieścić w każdej dziedzinie, takich jak ...

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

Jeśli urządzenie naprawdę trzeba dowolną ilość znaków, a następnie można wykrywać zdarzenie keyup na polu, a następnie rozwijaj go dynamicznie.

Answer 2

Dzięki za poradę z opakowaniem, miałem ten sam problem w firefox. W Chrome naprawiłem to za pomocą JS i metody scrollLeft (która z drugiej strony nie zadziała w FF). w jQuery: $('input').live('keyup', function() { $(this).parent().scrollLeft(0); }); ...

Answer 3

miałem ten sam problem i znalazł rozwiązanie 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> 

baw!

Answer 4

użyłem następujące rozwiązanie:

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

jsfiddle live example (full screen)