Как редактировать содержимое input?
Как изменить содержимое input в html?
Сама цена ("100 000") указывается в атрибутах. Если редактировать непосредственно в атрибутах (value и aria-valuenow), то в самом input на странице изменения не отображаются (остается значение "100 000"), на сервер возможно уйдет значение из этих атрибутов, но как обновить отображение?
<div class="ant-input-number-input-wrap"> <input autocomplete="off" role="spinbutton" step="1" class="ant-input-number-input" value="100&nbsp;000" aria-valuenow="100000"> </div> |
<div class="ant-input-number-input-wrap"> <input autocomplete="off" role="spinbutton" step="1" class="ant-input-number-input" value="100&nbsp;000" aria-valuenow="100000"> </div>
Дополнительно:
Подскажите, как изменить содержимое input в html?
<div class="ant-input-number-input-wrap"> <input autocomplete="off" role="spinbutton" step="1" class="ant-input-number-input" value="100&nbsp;000" aria-valuenow="100000"> </div> |
<div class="ant-input-number-input-wrap"> <input autocomplete="off" role="spinbutton" step="1" class="ant-input-number-input" value="100&nbsp;000" aria-valuenow="100000"> </div>
const input = document.querySelector('.ant-input-number-input'); input.value = 'new value'; |
const input = document.querySelector('.ant-input-number-input'); input.value = 'new value';
Если редактировать непосредственно в атрибутах (value и aria-valuenow), то в самом input на странице изменения не отображаются (остается значение "100 000"), на сервер возможно уйдет значение из этих атрибутов, но как обновить отображение?
Можно использовать MutationObserver для наблюдения за изменения значения атрибута aria-valuenow, и сразу менять значение input:
const cb = (mutationsList, observer) => { for (const mutation of mutationsList) { if (mutation.type === 'attributes' && mutation.attributeName === 'aria-valuenow') { mutation.target.value = mutation.target.getAttribute('aria-valuenow'); } } } const input = document.querySelector('.ant-input-number-input'); const observer = new MutationObserver(cb); observer.observe(input, {attributes: true}); |
const cb = (mutationsList, observer) => { for (const mutation of mutationsList) { if (mutation.type === 'attributes' && mutation.attributeName === 'aria-valuenow') { mutation.target.value = mutation.target.getAttribute('aria-valuenow'); } } } const input = document.querySelector('.ant-input-number-input'); const observer = new MutationObserver(cb); observer.observe(input, {attributes: true});
- Меняется, но если кликнуть на поле, то значение сбрасывается...
- pavelsa, причем здесь Ваше поле? Вы вопрос видели? - необходимо изменить значение input.
- Михаил Р., объясню для чего мне это нужно. В html имеются другие дополнительные цены (такие же input) и мне нужно на основании этой основной цены высчитать по формуле и заполнить другие inputы средствами js через Tampermonkey
- Кстати, если изменить ценник в атрибутах, то на сервер все летит прежнее значение
- pavelsa, а Вы это сразу в самом вопросе не могли указать? Создавайте новый вопрос сразу с подробностями, чтобы потом не выяснялось, что "на самом деле, нужно было сделать еще и так".
- pavelsa,
Кстати, если изменить ценник в атрибутах, то на сервер все летит прежнее значение
И Ваш сервер здесь так же не причем. Повторюсь, вопрос был "как изменить значение input", я предоставил 2 варианта, прямое изменение и не прямое, за счет изменения атрибута, задача выполнена.
- Михаил Р., чего так остро реагируете, как-будто что-то отобрали у вас, расслабьтесь)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для редактирования содержимого input вам нужно использовать JavaScript. Вот пример простой функции, которая позволит вам изменить содержимое input:
function editInputContent() { var input = document.getElementById('myInput'); // замените 'myInput' на id вашего input input.value = 'Новое содержимое'; // замените 'Новое содержимое' на то, что вы хотите установить в input }
Вы можете вызвать эту функцию в момент, когда вам нужно изменить содержимое input, например, при клике на кнопку:
<button>Изменить содержимое</button>
Это простой пример, но вы можете настроить функцию editInputContent() для более сложных случаев, например, для изменения содержимого input на основе введенных пользователем данных или других действий пользователя. Надеюсь, это поможет вам редактировать содержимое input на вашем веб-сайте.