Исправить символ ввода текста с помощью javascript / jquery

Question

Я ищу способ «исправить» символ доллара $ в поле ввода текста, например, <input type="text" value="$" />, но сделать невозможным удаление значения по умолчанию, чтобы при вводе пользователем всегда было $ символ «предваряющий» ввод.

Приветствия

Answer 1

Существует возможность background-image, но ее сложно поддерживать, и она не реагирует на изменения размера шрифта, что делает его менее оптимальным выбором IMO.

В моем мнении лучше было бы:

• Поставьте <span>$</span> рядом со входом (перед ним, на самом деле).

• дай ему position: relative; left: 20px.

• Знак $ затем перемещается в поле ввода.

• Затем введите поле ввода padding-left: 24px.

• вуаля! Знак $ находится в поле ввода, ничего не скрывает и не может быть удален.

Answer 2

Расширяя ответ Пекки, я использовал это на своей странице, но немного автоматизировал его с помощью jQuery. Так что для этого примера, во все поля ввода, в которые я хочу поместить символ $, я даю им класс «cost».

CSS:

<style type=&quot;text/css&quot; media="screen">
.cost{
    position: relative;
    left: 20px;
}
input.cost{
    padding-left: 24px;
}
</style>

JQuery:

<script type="text/javascript">
$(document).ready(function(){    
    $("#lcce form input.cost").wrap('<div class=&quot;cost">');
    $("#lcce form input.cost").before('<span class="cost"></span>');
});
</script/>

Это поместит промежуток с классом «cost» прямо перед вашим вводом, а также обернет div вокруг ввода и промежутка, чтобы они гарантированно находились на одной строке.

Если у вас нет jQuery, вы можете получить его по адресу: jQuery.com

Теперь у меня быстрый вопрос - я заметил, что в этом стиле в IE6,7 и 8 символ $ выстроен неправильно. У кого-нибудь есть решение для этого?

Спасибо!

Answer 3

Я сделал это так:

$('#price').keypress(function(event) {
var code = (event.keyCode ? event.keyCode : event.which);
if ($(this).val().indexOf('$') === -1){
    document.getElementById("price").value = "$" + $(this).val();
  } else {
    document.getElementById("price").value = $(this).val();
  }  
});

с <input type="text" id="price">.

Пользователь может удалить знак доллара вручную, если он / она хочет.

Answer 4

Я тоже искал разные решения для этого. Лучше всего использовать CSS для отступа текста с отступами и поместить фоновое изображение в эту позицию.

Answer 5

Это только визуальный эффект? Если да, вы можете применить это с CSS в качестве фонового изображения на входе.

После этого на сервере вы можете делать со значением все, что захотите (например, добавьте к нему $).