将文本附加到文本框输入答案

【问题标题】：Append text to textbox input将文本附加到文本框输入
【发布时间】：2020-03-12 21:59:13
【问题描述】：

我有一个文本框，用户应该在其中输入子域，但根域总是相同的。所以我想附加根域，如“.example.com”，所以如果用户想要使其成为“test.example.com”，他们只需要输入“test”。在Append text to input field 之后，如果我等到用户完成该字段后再追加文本，我可以让它工作，但是为了清楚地向用户显示主域是为他们追加的，我希望追加在他们键入时发生，而不是知道 Javascript 我这样做了：

<input class="form-control" type="text" name="subdomain" id="subdomain" placeholder=".example.com" oninput="$('#subdomain').val($('#subdomain').val() + '.example.com');">

我相信您可以看到出了什么问题，每次按键都会附加“.example.com”，所以我在键入时会得到类似“te.example.com.example.com”的内容。有没有简单的方法让它只附加一次？

【问题讨论】：

标签： jquery html

【解决方案1】：

如果没有任何特定原因使用此方法，您可以使用两种不同的输入，一种用于用户放置子域，另一种用于域。 Plesk 面板使用此方法注册子域 (image)。

类似这样的：

$('#submitBtn').click(function() {
  $subdomain_val = $('#subdomainInput').val();
  $domain_val = $('#domainInput').val();
  
  console.log($subdomain_val + '.' + $domain_val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <input class="form-control" type="text" name="subdomain" id="subdomainInput" placeholder="test">

  <b>.</b>

  <input id="domainInput" class="domain" type="text" value="example.com" name="domain" disabled>

  <button id="submitBtn">Submit</button>
</div>

#domainInput 一直是disabled，因此用户无法更改它。您可以根据需要将其删除。

您还可以设置它的样式以隐藏它是一个输入字段，如下所示：

#domainInput {
  border: 0;
  background: #fff;
}

【讨论】：

这几乎就像我之前尝试的一样，只是将 .example.com 作为常规文本强行内联，让所有内容与表单字段的其余部分完美对齐是一种痛苦。如果我调整窗口大小，当我确实得到它时，它会再次失控。这个选项似乎也有同样的缺点，除非有办法将两个输入框合二为一。

【解决方案2】：

只需添加一个条件来检查 example.com 最后是否已经存在。试试这样的

<input class="form-control" type="text" name="subdomain" id="subdomain" placeholder=".example.com" oninput="/.*\.example.com$/.test('a.example.com') ? $('#subdomain').val($('#subdomain').val()) : $('#subdomain').val($('#subdomain').val() + '.example.com');">

但正如@Αntonis Papadakis 所建议的，最好在提交时附加数据。

【讨论】：

我不需要提交时的最后一部分，因为它是静态的，并且总是相同的，它的存在是为了 UI 的好处。

【解决方案3】：

一旦您想向用户展示结果如何，这可能对您有用。

https://jsfiddle.net/7d4Lnz02/2/

('#subdomain').on('keyup', function(event){
    const key = event.keyCode || event.charCode;
    const domain = ".example.com";
    if( key == 8 || key == 46 ){
        $('#subdomain').val('');
      return false;
    }
    if($('#subdomain').val()===''){
      $('#subdomain').val($('#subdomain').val() + domain);
    }else{
      $('#subdomain').val($('#subdomain').val().replace(domain,''));
      $('#subdomain').val($('#subdomain').val() + domain);
    }

})

【讨论】：

【解决方案4】：

如果您想手动操作，可以这样做

<script>
$('#subdomain').keyup(function(a,b) {
    var text = $('#subdomain').val() ;
    var beforeDomaineName  = text.replace (".example.com", "");
    $('#subdomain').val(beforeDomaineName + '.example.com');
});

但可能最好的方法是使用像 https://coreui.io/docs/components/masked-input/ 这样的 jquery 插件

【讨论】：