Question

我有一个文本框，用户应该在其中输入子域，但根域始终是相同的。因此，我想附加根域，例如“ .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”的内容。有没有简单的方法可以将其添加到仅附加一次的地方？

Answer 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;
}

Answer 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');">

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

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

})

Answer 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插件

将文本追加到文本框输入

4 个答案: