Как избежать дублирования при динамическом изменении значения формы в JavaScript?

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

При выполнении кода ниже:

<pre><code class="javascript">if (document.getElementById("mess").value == 'Курьер') {
	document.getElementById("gift_mess").value = 'добавленный текст '+document.getElementById("gift_mess").value+'';
}</code></pre>

В результате выполнения, при нажатии кнопки отправки формы, вместо ожидаемого результата - <b>добавленный текст</b> + <i>пользовательский текст</i>, в поле появляется дважды <b>добавленный текст</b>, за которым следует <i>пользовательский текст</i>. 

Как можно исправить эту проблему? 

Спасибо.
  • 21 февраля 2025 г. 7:34
Ответы на вопрос 2
Чтобы избежать дублирования текста в поле ввода при динамическом изменении его значения, вам нужно убедиться, что добавленный текст добавляется только при определенных условиях и не дублируется, если он уже есть в строке. Для этого вы можете использовать следующую стратегию:

1. Проверять, есть ли уже добавленный текст в значении поля перед тем, как добавлять новый текст.
2. Если он уже есть, не добавлять его снова.

Вот пример исправленного кода:

```javascript
const giftMessInput = document.getElementById("gift_mess");

if (document.getElementById("mess").value == 'Курьер') {
    const addedText = 'добавленный текст ';
    // Проверяем, есть ли уже добавленный текст в поле ввода
    if (!giftMessInput.value.startsWith(addedText)) {
        giftMessInput.value = addedText + giftMessInput.value;
    }
}
```

В этом коде мы используем метод `startsWith()` для проверки, начинается ли текущее значение поля ввода с добавленного текста. Если нет, мы добавляем его в начале. Это устраняет проблему дублирования текста.

### Альтернативный подход

Если вы хотите не делать проверку, а всегда заменять текст, вы можете использовать функцию `substring()`, чтобы сохранить пользовательский текст и просто заменить предшествующий текст:

```javascript
const giftMessInput = document.getElementById("gift_mess");

if (document.getElementById("mess").value == 'Курьер') {
    const addedText = 'добавленный текст ';
    // Сохраняем пользовательский текст
    const currentUserText = giftMessInput.value.replace(addedText, '').trim();
    giftMessInput.value = addedText + ' ' + currentUserText;
}
```

Этот код удаляет `добавленный текст`, если он уже есть, и затем добавляет его снова, сохраняя пользовательский текст. Это тоже поможет избежать дублирования.
Приветствую. Нужно проверку добавить, есть этот текст в текущем состоянии или нет: <br/> <pre><code class="javascript">if (document.getElementById("mess").value == 'Курьер') {
    const giftMessField = document.getElementById("gift_mess");
    const userText = giftMessField.value;
    const addedText = 'добавленный текст ';

    if (!userText.startsWith(addedText)) {
        giftMessField.value = addedText + userText;
    }
}</code></pre>
Похожие вопросы