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

18

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

Приветствия     

задан Eddie 07.02.2010 в 22:30
источник
  • Проверьте мой ответ здесь –  Bhavik 28.05.2014 в 12:35

5 ответов

39

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

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

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

  • укажите position: relative; left: 20px .

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

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

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

ответ дан Pekka 웃 07.02.2010 в 22:33
4

Развернувшись на ответе Пекки, я использовал это на своей странице, но немного автоматизировал его с помощью 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, символ $ не выравнивается правильно. У кого-нибудь есть исправление для этого?

Спасибо!     

ответ дан user1356576 21.01.2011 в 13:50
0

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

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

    
ответ дан cherouvim 07.02.2010 в 22:34
  • Это визуальная вещь, чтобы люди знали, что вход будет в формате $, например, $ 22,00 –  Eddie 07.02.2010 в 22:39
0

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

    
ответ дан user914966 08.11.2011 в 23:39
0

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

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

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

    
ответ дан Engin Yapici 14.09.2013 в 04:04