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

Question

[pavelsa]

Как изменить содержимое 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>

Answer 1

[Михаил Р.]

Подскажите, как изменить содержимое 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});

Comments

[pavelsa]

Меняется, но если кликнуть на поле, то значение сбрасывается...

[Михаил Р.]

pavelsa, причем здесь Ваше поле? Вы вопрос видели? - необходимо изменить значение input.

[pavelsa]

Михаил Р., объясню для чего мне это нужно. В html имеются другие дополнительные цены (такие же input) и мне нужно на основании этой основной цены высчитать по формуле и заполнить другие inputы средствами js через Tampermonkey

[pavelsa]

Кстати, если изменить ценник в атрибутах, то на сервер все летит прежнее значение

[Михаил Р.]

pavelsa, а Вы это сразу в самом вопросе не могли указать? Создавайте новый вопрос сразу с подробностями, чтобы потом не выяснялось, что "на самом деле, нужно было сделать еще и так".

[Михаил Р.]

pavelsa,

Кстати, если изменить ценник в атрибутах, то на сервер все летит прежнее значение

И Ваш сервер здесь так же не причем. Повторюсь, вопрос был "как изменить значение input", я предоставил 2 варианта, прямое изменение и не прямое, за счет изменения атрибута, задача выполнена.

[pavelsa]

Михаил Р., чего так остро реагируете, как-будто что-то отобрали у вас, расслабьтесь)