Как автоматически добавить значение после ввода текстового поля пользователя

Question

Как добавить автоматическое значение после того, как пользователь добавляет текст к вводу в поле текста / электронной почты. Например, пользователь вводит номер своего мобильного телефона, а пользовательский @ domain.com вводится после ввода пользователя. Пожалуйста, смотрите код ниже:

<div class="email">
    <input class="gift_receiver_email" type="text" placeholder="<?php _e( 'Email address', WC_SC_TEXT_DOMAIN ); ?>..." name="gift_receiver_email[0][0]" value="" />
</div>

Примечание: я не имею в виду установленное значение, когда пользователь видит поле (пример значения = "текст отображается"), и должен устанавливать функцию на запуск только при вводе пользователем не менее 10 символов

Answer 1

используйте событие onchange.Событие размытия запускается каждый раз, когда вы фокусируете и оставляете введенный текст.

событие изменения запускается только при изменении его содержимого.(браузер сделает всю работу за вас)

в любом случае вы должны проверить, чтобы не сочетаться с '+ @ domain.com', как это: test @ domain.com @ domain.com.

это простая задача, которую я могу решить, я могу предоставить ее вам.

Answer 2

ОБНОВЛЕНИЕ: onChange лучше, чем onBlur и соответственно обновил мой ответ.

---

Использование onChange:

function updateInput(inputElm) {  
  inputElm.value = inputElm.value+'@domain.com';
}

<div class="email">
    <input class="gift_receiver_email" type="text" placeholder="<?php _e( 'Email address', WC_SC_TEXT_DOMAIN ); ?>..." name="gift_receiver_email[0][0]" value="" onchange="updateInput(this)"/>
</div>

Использование onBlur:

function updateInput(inputElm) {  
  inputElm.value = inputElm.value+'@domain.com';
}

<div class="email">
    <input class="gift_receiver_email" type="text" placeholder="<?php _e( 'Email address', WC_SC_TEXT_DOMAIN ); ?>..." name="gift_receiver_email[0][0]" value="" onblur="updateInput(this)"/>
</div>

Answer 3

<input id="gift_receiver_email" class="gift_receiver_email" type="text" placeholder="<?php _e( 'Email address', WC_SC_TEXT_DOMAIN ); ?>..." name="gift_receiver_email[0][0]" value="" /

var gift_receiver_email = document.getElementById("gift_receiver_email");
gift_receiver_email.addEventListener("blur", function( event ) {
    var value = event.target.style.background = "";   
    value += '@domain.com';
    gift_receiver_email.value = val(value);  
}, true);

Answer 4

Вот Простейший пример

function addDefault(tag)
{
  
  if(tag.value.length != 10) //to check if characters length is not 10
  return; //exit the function
  tag.value += '_someValue';

}

<input type="text" id="myInput" onblur="addDefault(this)">

Answer 5

Исходя из моего комментария. Вы можете использовать onBlur для вызова функции JavaScript, которая создаст иллюзию автоматического вызова. Другой альтернативой может быть использование onChange, однако я бы предложил против этого, так как это вызовет функцию javascript КАЖДЫЙ раз, когда пользователь вводит символ