在 jQuery 中，如何从表单的名称字段中提取首字母？答案

【问题标题】：In jQuery, how can I extract initials from the name field of a form?在 jQuery 中，如何从表单的名称字段中提取首字母？
【发布时间】：2018-01-13 17:48:41
【问题描述】：

我能想到一些真正丑陋的解决方案，但我希望那里的一些天才有一个优雅的解决方案。我有一个表单，它将名称作为输入并将该名称发送到函数。现在我需要把名字去掉它的首字母（例如，“John Doe”变成“JD”）并发送它。

任何建议。（我会说最好不涉及正则表达式，但我觉得我不会在这方面走运。）

<form>
<div class="form-group">
    <div>
      <input type="text" class="form-control" name="yourName">
    </div>
</div>
<div class="form-group">
<button type="submit" class="btn" onclick="id.push(yourName)">Tell us your name</button>
</div>
</form>

编辑：为了回应某人礼貌地要求提供我尝试过的细节：我的想法是查看鼠标悬停时名称字段的值并以这种方式提取首字母。不幸的是，虽然 jQuery 选择了 mouseout 事件，但它并没有为该字段提供任何值。

这是有问题的代码：

$("input[name=yourName]").mouseout(function(){
   console.log($("input[name=yourName]").val());
})

【问题讨论】：

标签： jquery forms input

【解决方案1】：

有很多方法可以做到这一点，但由于您宁愿避免使用正则表达式，您将不得不做更多的小工作。在此示例中，我只是将输入值拆分为一个单词数组，然后取每个单词的第一个字母：

$(function() {
  function getInitials(valStr) {
    var words = valStr.split(" "),
      initials = "";
    words.forEach(function(word) {
      initials += word.charAt(0);
    });
    return initials.toUpperCase();
  }
  $("input[name=yourName]").mouseout(function() {
    var val = $(this).val();
    console.log(val);
    console.log(getInitials(val));
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input name="yourName" />
</form>

【讨论】：

谢谢，穆布。我现在可以看到我哪里出错了。 FWIW，我想出了另一个解决方案。见下文。
实际上，我的解决方案与 Moob 的解决方案几乎相同，所以对他表示敬意。

【解决方案2】：

我的解决方案是 ->

<script>
var getInitials = function(name){
    var inits = "";
    var names=name.toUpperCase().split(" ");
    for (var i = 0; i < names.length; i++){
        inits += names[i].charAt(0)+".";
    }
    return inits;
}
</script>


var initials = "";

 <div class="signup-form">
<form>
<div class="form-group">
<input type="text" onBlur="initials=getInitials(this.value)" class="form-control" name="yourName">
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-info" onclick="_id.push(initials)">Sign Up</button>
</div>
</form>
</div>

【讨论】：