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

【问题标题】：How to auto add a value after user text field input如何在用户文本字段输入后自动添加值
【发布时间】：2018-11-19 10:56:03
【问题描述】：

如何在用户将文本添加到文本/电子邮件字段中的输入后添加自动值。例如，用户输入他们的手机号码，并在用户输入后输入自定义的@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>

注意：我不是指用户看到该字段时的设置值（例如 value="text displayed"），并且应该将函数设置为仅在用户输入至少 10 个字符时运行

【问题讨论】：

你可以使用'onBlur'来调用一个javascript函数。这意味着一旦用户将光标从文本框移开，就会调用 javascript。
以下示例完美运行，尽管如果用户返回编辑字段或删除文本，函数堆栈如下面的一些用户所述。是否可以将功能设置为仅在用户输入最少和最多 10 个字符时运行。
@Walter 人们在问题不包含任何标签的情况下给出了 JS/jQuery 答案。您是否仍然愿意接受使用 PHP 之外的那些（其他）语言的可能解决方案？第二个问题；有人添加了“php”标签；那是你要找的东西，还是任何语言（提到的）？
@Funk Forty Niner 我愿意使用其他语言来解决这个问题。我不能改变我的基本代码。请随时使用您认为最好的语言编辑问题。提前致谢
@Walter 事情是，如果人们可以禁用 JS，那么提供 JS/jQuery（和 ajax）的答案将不起作用。个人而言，如果要使用JS，那么应该同时使用一个服务端的方法。我很少使用 JS，只用于花哨的东西，例如眼睛糖果。如果您希望我编辑标签，您可以选择。但是，您可能希望编辑您的问题以包含细节，这样每个人都知道会发生什么。

标签： php html forms

【解决方案1】：

这是一个最简单的例子

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

}

&lt;input type="text" id="myInput" onblur="addDefault(this)"&gt;

【讨论】：

这项工作完美无缺，尽管如果用户返回编辑字段或删除文本，功能堆栈如下面的一些用户所述。是否可以将功能设置为仅在用户输入最少和最多 10 个字符时运行。
@Walter 是的，有可能...简单我们需要添加这样的条件if(this.value.length != 10) return;
您介意将条件添加到您的代码中吗，我不断收到错误消息。提前致谢
嗨，当我运行 sn -p "{ "message": "Uncaught TypeError: Cannot read property 'length' of undefined", "filename": "stacksnippets.net/js ", "lineno": 16, "colno": 17 } " 感谢您迄今为止的所有帮助
像魅力一样工作，非常感谢@matee gojra。这就是答案

【解决方案2】：

<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);

【讨论】：

没有提到使用JQuery的问题
@MateeGojra 提供 JS 方法的所有其他答案（到目前为止）也是如此。

【解决方案3】：

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

【讨论】：

【解决方案4】：

更新：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>

【讨论】：

我建议不要在这种情况下使用 onChange 但是因为每次用户输入字符时都会调用该函数
这些示例运行良好，尽管如果用户返回编辑字段或删除文本，则函数堆栈如下面的一些用户所述。是否可以将功能设置为仅在用户输入最少和最多 10 个字符时运行。

【解决方案5】：

使用 onchange 事件。每次聚焦并离开输入文本时都会触发 blur 事件。

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

在任何一种情况下，您都必须检查不与 '+ @domain.com' 叠加，如下所示： test@domain.com@domain.com.

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

【讨论】：