Сделать первый символ ввода HTML недоступным для редактирования - javascript
У меня есть поле ввода
<input type = "text" value = "$">
Мне нужно, чтобы символ $ был зафиксирован в первом месте ввода, независимо от числа или символа, введенного внутри ввода.
В настоящее время я добавляю символ $ извне в функцию onChange
value = '$' + value
В принципе, пользователь не должен иметь возможность очистить символ $. Это должно быть исправлено. Как этого добиться?
Я использую javascript и React.
Так что плохого в использовании подхода onChange ??
—
31.07.2018 15:17
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
671
2
Ответы 2
При изменении ввода вы можете сначала удалить все вхождения $ из значения. Затем добавьте к значению префикс $.
Попробуйте следующее:
function inputValue(el){
el.value = el.value.replace(/[$+]/g, ''); //replace all $ with empty string
el.value = '$' + el.value; //prepend $ to the input value
}<input type = "text" value = "$" oninput = "inputValue(this)">Если вы хотите разрешить только числа и точку (.), просто используйте:
el.value = el.value.replace(/[^0-9.]/g, '');
Вы помещаете свое поле ввода в div. Этот div показывает заполнитель для вашего поля ввода и заставляет его выглядеть так, как будто внутри действительно есть символ $, который не редактируется.
.foo {
padding-left: 20px;
}
.placeholder
{
position: relative;
}
.placeholder::after
{
position: absolute;
left: 5px;
top: 1px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 0.6;
}<div class = "placeholder" data-placeholder = "$">
<input type = "text" class = "foo" value = "">
</div>
<button type = "button" onclick = "alert(document.getElementsByClassName('foo')[0].value)">
Get Value
</button>Другие вопросы по теме
Webpack - загрузчик Sass не компилирует Sass
Webpack 4: пакет js не найден
TypeError: невозможно прочитать карту свойств неопределенных вызовов API ReactJS
Как правильно сопоставить набор данных с таблицей с помощью React
Где хранить простые изменения состояния в Redux
Как обновить компонент при изменении состояния контейнера
Экземпляр найденного компонента равен нулю с использованием полного монтирования фермента
Реагировать на Redux с Firebase
Панель поиска с результатами API получения (ReactJs)
React native Google Signin Fail, когда я буду собирать релиз apk
Похожие вопросы
Webpack - загрузчик Sass не компилирует Sass
Избыточность кода делает это быстрее?
TypeError: _Model2.default.aggregate (...). ForEach не является функцией
REQUEST_DENIED для API геокодирования Google
Как оценить JavaScript с помощью Swift - получение nil для всех значений (всегда: даже путь правильный)
Javascript - Прогнозирование мобильной прокрутки
VueJS: Невозможно прочитать имя свойства неопределенного "
Запрос Firebase, который возвращает объекты
Как динамически зарегистрировать RPC-провайдера?
Что означает \ u001b [1G \ u001b [2K>]?
Вы можете попробовать использовать CSS, чтобы создать впечатление, что символ «$» является частью ввода, сделав границу вокруг них обоих. Внешний вид символа $ - это то, что вам нужно, а не функциональность ввода.