Как можно изменить значение поля ввода, если после сохранения старое значение возвращается обратно?

Question

Ольга

javascript

Как можно изменить значение поля ввода, если после сохранения старое значение возвращается обратно?

Я не владею JavaScript и HTML, но сейчас мне нужно написать расширение для Chrome, которое должно находить текст в input и заменять его. 

Я осуществляю замену текста следующим образом: 
```javascript
$("[xm-name=id_10] input").value = '12212';
```
Тем не менее, после нажатия кнопки "Сохранить" текст возвращается к предыдущему значению. 

Если я изменяю текст непосредственно в поле input, то после сохранения остается тот текст, который был введен. 

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

28 марта 2025 г. 7:44

Ответы на вопрос 2

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

Answer 1

Чтобы ваше расширение Chrome сохраняло изменения в поле ввода, вам нужно будет не только изменить значение этого поля, но и убедиться, что приложение, работающее на странице, узнает о внесенных изменениях. Это можно сделать, вызвав событие изменения (change event) после изменения значения поля.

Вот как это можно сделать:

1. Измените значение поля так, как вы уже делаете.
2. Затем создайте и вызовите событие `input` и/или `change`, чтобы уведомить приложение о том, что значение изменилось.

Вот пример кода, который иллюстрирует этот подход:

```javascript
// Найдите нужный элемент
const inputElement = $("[xm-name=id_10] input")[0];

// Измените значение поля
inputElement.value = '12212';

// Создайте ивенты
const eventInput = new Event('input', { bubbles: true });
const eventChange = new Event('change', { bubbles: true });

// Вызовите события
inputElement.dispatchEvent(eventInput);
inputElement.dispatchEvent(eventChange);
```

### Объяснение кода:
- `const inputElement = $("[xm-name=id_10] input")[0];` — получаем первый элемент, соответствующий селектору. Убедитесь, что у вас правильно настроен jQuery.
- `inputElement.value = '12212';` — устанавливаем новое значение для поля.
- `new Event('input', { bubbles: true });` — создаем событие `input`, чтобы обновить состояние input.
- `inputElement.dispatchEvent(eventInput);` — вызываем событие `input`.
- `inputElement.dispatchEvent(eventChange);` — вызываем событие `change`, чтобы сообщить приложению о завершении изменения.

### Примечания:
- После вызова этих событий, если JavaScript приложения правильно настроен, ваше новое значение будет сохранено при нажатии кнопки "Сохранить".
- Убедитесь, что это расширение действительно имеет доступ к содержимому страницы и не блокируется политикой безопасности контента (CSP).

Этот метод должен помочь обеспечить правильное сохранение значения после нажатия кнопки "Сохранить".

Answer 2

Многие формы уже не работают на голом JS, если они используют фреймворк с реактивностью (например, Vue). 
 Это значит, что мало записать что-то в атрибут тега, нужно еще поджечь некое событие, чтобы фреймворк, который подписан событийно на изменения состояния тега, мог это состояние передать во внутренний объект. 
 Как правило, при submit-е реактивной формы передаются не сами значения input-ов, а состояние внутреннего объекта формы. 
 В вашем случае нужно попробовать поджечь события, которые запускаются при ручном изменении поля ввода: 
 let el1 = document.querySelector('div[xm-name="id_10"]');
el1.value = ‘1-8 путь’;
// нужно поджечь такие события, которые возникают при ручном вводе:
el1.onchange();
el1.oninput();
 
 PS: Какие-то странные у вас кавычки, запяточенные. Обычно, для JS используют прямые кавычки.