2013-08-12 5 views
0

У меня есть область ввода:области ввода Chrome и Firefox ведут себя разные

<input class="input-large" type="text" pattern="[0-9]*" maxlength="5" size="5" autofocus> 

CSS для этого входа:

   .input-large{ 

       position: absolute; 
       width: 600px; 
       margin: 0 auto; 

       font-size: 150px; 
       text-align: left; 
       border: 1; 
       letter-spacing: 38px; 

      } 

Я хочу, чтобы достичь этого: Пользователь может вводить не более 5 номеров, если превышен 5 номеров, окно ввода останавливается, чтобы показать остальные номера.

Когда я тестирую его на Firefox, все в порядке. Однако, когда я тестирую его на Chrome, у Chrome есть желтый прямоугольник фокуса, который хорош, но когда я помещаю более 5 номеров, предыдущие числа сдвигают левый бит, они не остаются фиксированными, как в Firefox.

Кто-нибудь знает, как отключить эти функции Chrome?

------------------------------- обновить -------------- ----------------------------

Я решил эту проблему, установив DIVs абсолютно и шире. Это поле ввода находится внутри другого div. Ранее внешний div относительный. Затем я вернулся к абсолютному и скорректировал маржу. теперь все работает нормально.

+0

Не удалось воспроизвести проблему в моей версии Chrome 28.0.1500.95m (Windows). jsFiddle Harshad

+1

Привет, Харшад, благодарю вас за ответ. Поскольку эта проблема была всего лишь частью всего веб-сайта, я думаю, что разные div оказывают некоторое влияние друг на друга. В конце концов я изменил позицию на «фиксированную» и увеличил поле ввода, решил мою проблему. – JavaScripter

ответ

1

желтый прямоугольник фокуса от outline. просто установите: outline: none;, чтобы избавиться от него

+0

Привет, спасибо за ваш быстрый ответ. Как я уже сказал, желтый цвет прекрасен, но цифры отскакивают, немного, когда вход превышает 5 чисел. В Mozilla, если вход превышает 5 номеров, первые пять номеров остаются фиксированными, но в Chrome числа отскакивают, оставаясь немного после превышения 5 номеров ... любое решение для этого? – JavaScripter

+0

@RobertChang Я так не думаю, что это ожидаемое поведение. Он подталкивает числа влево, потому что, если вы печатаете, вам нужно посмотреть, что вы печатаете. вы говорите, что если вход больше поля ввода, вы хотите показать только первые числа и отрезать все остальное? в любом случае, вход будет отключен, единственным решением будет сделать поле ввода больше. – kennypu

+0

Привет, kennpy, я обнаружил, что проблема была вызвана другим div. Я делаю div, который содержит это поле ввода более широким и абсолютным положением, тогда проблема решена. – JavaScripter

Смежные вопросы