Блог

Мне нужно добавить знак доллара в поле, в котором отображается общая сумма оплаты, но я не хочу, чтобы этот знак доллара был включен в тег «значение». Вот что у меня есть сейчас.

 <input type="number" class="total" id="totalpaying" name="totalpaying" value="<% total %>" readonly>  

1. Создайте контейнер, оформленный как текстовое поле
2. Внутри этого контейнера добавьте два встроенных элемента:
   • интервал для хранения символа валюты
   • текстовое поле ввода для хранения значения
3. Оформите входной элемент так, чтобы он не имел границ.

Это создаст иллюзию текстового поля с символом валюты. Символ не будет доступен для редактирования.

Используя Css, вы можете добиться этого.

HTML

 <div class="text">input type="number" class="total" id="totalpaying" name="totalpaying" value="<% total %>" readonly></div>
  

Css

 <style>
div.text{
position:relative;
padding-left: 20px;
}

div.text:after{
position: absolute;
    left: 6px;
    top: 2px;
    content: '$';
}
</style>
  

Вот код https://jsfiddle.net/12efgo6t/1 /

Как написано, ответ на вопрос «вы не можете». Если вы хотите <input> , чтобы элемент отображал «$ 1.00», «$» должен быть частью value свойства.

Теперь, при этом, есть способы делать то, что вы хотите, в основном с использованием Javascript для управления значением входного элемента.

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

1. когда входной элемент инициализируется значением «1», добавьте некоторый Javascript, чтобы взять это «1» и отформатировать его как «$ 1.00»

2. когда пользователь нажимает на элемент элемента ввода (или вкладки в него), чтобы начать редактирование, используйте onFocus обработчик, чтобы удалить знак «$», чтобы пользователь редактировал «1.00»

3. когда пользователь щелкает где-то в другом месте (или выводит вкладки из элемента ввода), используйте onBlur обработчик, чтобы переформатировать значение как «$ 1.00»

Это очень простой пример и, в зависимости от ваших потребностей, может быть или не быть тем, что вы хотите. Конечно, можно было бы написать обработчики Javascript для onFocus , onChange , onKeyUp/onKeyDown , и onBlur обработчики, чтобы сохранить это «$» там во время редактирования, но это будет намного сложнее.