В Firefox, как заставить курсор придерживаться последнего набранного символа? - PullRequest
Новая
       10

В Firefox, как заставить курсор придерживаться последнего набранного символа?

4 голосов
/ 20 марта 2009

У меня есть поле ввода, в котором будет напечатан серийный номер. Количество разрешенных символов установлено.

Проблема в том, что из-за межбуквенного ввода при вводе символа в Firefox курсор будет прыгать вперед к тому месту, где вы будете вводить следующий символ (даже с установленной максимальной длиной), в котором разрыв символов выполняется из небольшого Ящики, в которых они должны находиться, вот так: Прыжок курсора Firefox
Прыжок курсора Firefox http://www.bryonykernick.com/dropboxofdeath/ff-form-cursor.png

IE отображает его «правильно»: т.е. нет перехода курсора
т.е. нет перехода курсора http://www.bryonykernick.com/dropboxofdeath/ie-form-cursor.png

Как заставить firefox не поставить курсор после межбуквенного интервала? (jQuery было бы неплохо, если бы JS был возможен / необходим)

Вот мой код: 

    #serial {
    background:transparent url(../images/bg_serial.gif) no-repeat scroll 0 50%;
    border:0 none;
    color:#FFFFFF;
    font:bold 16px Courier New;
    height:22px;
    letter-spacing:14px;
    line-height:normal;
    padding:4px 0 0 6px;
    text-transform:uppercase;
    width:208px;
    }

<form id="serialForm">
<label for="serial">Serial:</label>
<input id="serial" type="text" name="serial" maxlength="9" />
</form>

Ответы [ 4 ]

2 голосов
/ 24 марта 2009

FireFox обрабатывает letter-spacing иначе, чем Internet Explorer и остальные браузеры.

Если вы измените width элемента ввода на 220 пикселей, вы не вызовете переполнения текста. А поскольку вы эффективно скрываете ввод, дополнительная ширина не имеет значения.


Я тестировал это решение в Chrome build 1.0.154.53, FireFox 3.0.7 и Internext Explorer 8.0.6001. 18372.

0 голосов
/ 20 марта 2009

Как насчет того, чтобы проверить длину серийного номера и, если он достигнет правильной длины, он переместит фокус на другой элемент, предотвращая переполнение? 

<script type="text/javascript">
function CheckLength(myBox){
var myValue= myBox.Value;
var myLength myValue.Length;
if(myLength == 9){
document.getElementById("Submit").Focus();
}
</script>
<form id="serialForm">
<label for="serial">Serial:</label>
<input id="serial" type="text" name="serial" maxlength="9" onkeyup="CheckLength(this);" />
<input type="submit" id="Submit" value="Submit"/>
</form>
0 голосов
/ 20 марта 2009

Вы можете быть в состоянии сместить x-положение фонового изображения на определенную величину, чтобы фон выровнялся с символами в Firefox / Safari и др., А затем использовать условный оператор IE CSS, чтобы IE вернулся к ваше позиционирование 0 50%.

edit: неправильно понял, что проблема появляется только в последнем символе. Если точность пикселя не важна в остальной части макета, установка ширины #serial равной ширине: 230px работает для меня в IE и Firefox.

0 голосов
/ 20 марта 2009

Я боюсь, что Firefox на самом деле обрабатывает это так, как должен, потому что символы теперь добавляются справа, чтобы соответствовать межбуквенному интервалу. Safari тоже это делает. IE делает это неправильно, он делает вид, что символ меньше, чем есть на самом деле.

Я бы предложил увеличить ширину поля ввода ...

...