如何格式化keyDown（）的输入值？

Question

我想强制文本字段的输入值符合特定的格式。它需要大写，并且不允许有数字。

我想这个事件发生在onKeydown()。

例子：

Lionel MESSI => Lionel Messi 
LiONEL MesSI => Lionel Messi 

Neymar JR => Neymar Jr 
Neymar 22 JR => Neymar Jr 

Franck D'HONNEUR => Franck D'Honneur 

Kevin PEREZ ROBERTO => Kevin Perez Roberto 

Answer 1

doi没有简单的单线程方法这个。但是，您可以创建一个可以为您设置名称格式的函数。

最初从this answer取，我已经修改了它稍微反映您所需的输出：

var name1 = "Lionel MESSI"; 
 
var name2 = "LiONEL MesSI"; 
 
var name3 = "Neymar JR"; 
 
var name4 = "Neymar 22 JR"; 
 
var name5 = "Franck D'HONNEUR"; 
 
var name6 = "Kevin PEREZ ROBERTO"; 
 

 
function toTitleCase(str) { 
 
    return str.replace(/\w\S*/g, function(txt){ 
 
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); 
 
    }).replace(/[0-9]/g, ''); 
 
} 
 

 
console.log(toTitleCase(name1)); 
 
console.log(toTitleCase(name2)); 
 
console.log(toTitleCase(name3)); 
 
console.log(toTitleCase(name4)); 
 
console.log(toTitleCase(name5)); 
 
console.log(toTitleCase(name6));

你可能想从MDN文档退房toUpperCase()和toLowerCase()。

---

要获得此功能的onKeyDown()，你可以使用jQuery像下面的代码片段。我建议反对onKeyDown()，但这会造成奇怪的用户体验。改为尝试onBlur。

function toTitleCase(str) { 
 
    return str.replace(/\w\S*/g, function(txt){ 
 
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); 
 
    }).replace(/[0-9]/g, ''); 
 
} 
 

 
$("#name").on("keydown", function() { 
 
    $(this).val(toTitleCase($(this).val())); 
 
});

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

Answer 2

一个小助手功能，从这个问题上的帮助：How do I make the first letter of a string uppercase in JavaScript?

我写了一个快速的脚本，输入模糊火灾：

$(document).ready(function() { 
    function capitalizeFirstLetterOfEachWord(string) { 
     strArr = string.split(' '); 
     resArr = []; 
     for(i=0;i<strArr.length;i++){ 
      resArr[i] = strArr[i].charAt(0).toUpperCase() + strArr[i].slice(1); 
     } 
     return resArr.join(" "); 
    } 

    $('.forceCapital').blur(function(e) { 
     $(this).val(capitalizeFirstLetterOfEachWord($(this).val())); 
    }); 
}); 

https://jsfiddle.net/sa2ox30d/2/