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

这是最简单的示例

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 2

在我的评论之后。您可以使用“ onBlur”来调用javascript函数，这会给人一种自动调用的感觉。另一种选择是使用onChange，但是我建议不要这样做，因为这将在用户每次输入字符时调用javascript函数

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

更新：<RenderCard />比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';
}

Answer 5

使用onchange事件。每当您聚焦并保留输入文本时，就会触发模糊事件。

change事件仅在其内容更改时才触发。（浏览器为您完成工作）

无论哪种情况，您都必须检查是否不与'+ @ domain.com'堆叠在一起，如下所示： test @ domain.com @ domain.com。

这是一个简单的任务，我可以交给你。

输入用户文本字段后如何自动添加值

5 个答案: