Исправить символ в текстовом поле ввода, используя javascript/jquery

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

Приветствия

Ответ 1

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

Лучшим способом для моего opionion будет:

Поместите a <span>$</span> рядом с входом (до него, на самом деле).
укажите position: relative; left: 20px.
Знак $затем перемещается в поле ввода.
Затем введите поле ввода padding-left: 24px.
Вуаля! Знак $находится в поле ввода, ничего не скрывает и не может быть удален.

Ответ 2

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

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/>

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

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

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

Спасибо!

Ответ 3

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

Затем на сервере вы можете делать все, что хотите, со значением (например, добавьте его с помощью $).

Ответ 4

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

Ответ 5

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

$('#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">.

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