Question

我正在尝试根据我们使用的现有手动公式为用户生成用户名：姓氏的前5个字符，名字的首字母缩写。

简单：

$("#first_name, #last_name").keyup(function(){
    var a = $("#first_name").val().substring(0, 1),
        b = $("#last_name").val().substring(0, 5);

    $("#username").val(b+a);
});

但是，我一直在试图找出姓氏少于5个字符的规则，然后用姓氏的下一个字母填充那些丢失的字符。最后，如果名字+姓氏总共少于5个字符，只需添加它们即可。

这是我一直在努力的方向，但没有奏效，我似乎无法逻辑解释为什么：

$("#first_name, #last_name").keyup(function(){

    var a = $("#first_name").val(),
        b = $("#last_name").val();

    if( b < 5 ) {

        var c = ( 5 - b.length );

        if( c > a.length ) {
            var d = a.substring(0, c);
            $("#username").val( b + d );
        } else {

            $("#username").val( b + a );
        }

    } else {

        $("#username").val( b + a );

    }       
});

Answer 1

如果姓氏少于5，则将两者串联在一起并取前6个。

如果姓氏大于5，则取姓氏的前5个加上姓氏的第一个字符。

$("#first_name, #last_name").keyup(function(){
    var a = $("#first_name").val().trim().toLowerCase().replace( / /g, ''),
        b = $("#last_name").val().trim().toLowerCase().replace( / /g, ''),
        c = '';
    
    if (!a || !b) return;
    
    if ( b < 5 ) {
        c = (b + a).substring(0, 6);
    } else {
        c = b.substring(0, 5) + a[0];
    }
    
    $("#username").val( c );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="" id="first_name" placeholder="First Name">
<input type="text" value="" id="last_name" placeholder="Last Name">
<div><input type="text" id="username"></div>

Answer 2

我一直在试图找出规则...

此处的密钥是姓氏。您只有2种情况，这取决于姓氏的长度。

当您知道它少于5个字符时。按原样使用！
并使用它的长度来计算要使用的字符数。

$("#first_name, #last_name").keyup(function(){

  var a = $("#first_name").val(),
      b = $("#last_name").val();

  // Last name longer than 5 chars
  if( b.length >= 5 ) {
    a = a.substr(0,1);
    b = b.substr(0,5);
    
  // Last name shorter than 5 chars
  }else{
    a = a.substr(0,(5-b.length+1));  // That is at least 1 + 5 possible "replacements"...
  }

  $("#username").val( b + a );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

First name: <input type="text" id="first_name"><br/>
Last name:  <input type="text" id="last_name"><br>
username: <input "type="text" id="username">

尝试获取输入1的前5个字符和输入2的第一个字符

2 个答案: