@pavelsa

Как редактировать содержимое input?

65ba2a56926fe899919998.png

Как изменить содержимое 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>
  • Вопрос задан
  • 153 просмотра
Решения вопроса 1
Mike_Ro
@Mike_Ro Куратор тега JavaScript
Python, JS, WordPress, SEO, Bots, Adversting
Подскажите, как изменить содержимое 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>

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});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы