使文本字段具有大写首字母和其余小写的Javascript答案

【问题标题】：Javascript to make a text field have capital first letter and rest lower case使文本字段具有大写首字母和其余小写的Javascript
【发布时间】：2015-12-31 04:25:01
【问题描述】：

我使用的表单软件编辑功能有限，但允许添加 java 脚本。通常我想用 PHP 来做这样的事情，但在这种情况下，我将不得不使用 Javascript，我对此几乎没有经验。

基本上在我的登录页面上，我有一个人们可以提交的表单。名姓电子邮件等等

问题是 - 我邮件合并提交，当人们输入他们的名字为 BOB SMITH 或 bob smith 而不是 Bob Smith 时，当我向他们发送这封电子邮件时，它看起来不专业。所以我想在这个登陆页面中添加一个javascript，当表单提交时，它将first_name文本字段和last_name文本字段中的字符串转换为首字母大写，其余小写。另一个问题是我不认为我可以编辑表单属性，所以如果可能的话，这个 javascript 基本上会出现在页面顶部，希望我不必编辑文本字段属性来激活它......任何帮助将不胜感激。

谢谢

【问题讨论】：

name = name[0].toUpperCase() + name.substr(1).toLowerCase();
给Mccoy和O'brien发邮件是不是看起来很不专业？无论如何，如果有人想把自己的名字全部大写，那么当其他人也这样做时，他们不太可能被打扰。
此外，您可以使用 onSubmitHandler 在按下提交按钮后修改用户键入的内容。 document.getElementById('theForm').onsubmit = function() { var firstName = document.getElementById('firstName'); firstName.value = firstName.value[0].toUpperCase() + firstName.value.substr(1).toLowerCase(); };
Juhana，不专业的事情是当有人不能正确地写自己的名字时:) 但是这个解决方案将问题减少了 95%。
见Convert first letter to uppercase on input box。

标签： javascript lowercase capitalization

【解决方案1】：

这是我最近创建的Javascript Gist for building human-readable names，它可以满足您的需要，还有一些额外功能。

我不会试图解释，而是这里有一些例子：

//dan macdonald -> Dan MacDonald [call true]
//dAN mCdOnAlD  -> Dan McDonald [call true]
//paz y MIño    -> Paz y Miño [call true]
//BEN d'hosier  -> Ben D'Hosier
//sara ma'afala -> Sara Ma'afala

像这样包含在您的页面中：

<script src="https://gist.github.com/isaacdozier/5ae92c1da9622c77df4c9a70a9f9a849.js">
</script>

或者通过https://gist.githubusercontent.com/isaacdozier/5ae92c1da9622c77df4c9a70a9f9a849/raw/a81c877e77a3c0c3a795ac40bbf6721950cb2e05/read-names.js访问原始文件

这样调用函数：

capsFullName('john SMITH')

输出“约翰·史密斯”

或者这个

capsFullName('sara y gonzalez', true)

输出“Sara y Gonzalez”

注意：capsFullName('sara y gonzalez') 输出“Sara Y Gonzalez”

【讨论】：

【解决方案2】：

你可以使用下面的函数：

function capitalizeFirstLetter(str) {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

它接收一个参数，并返回第一个大写字母+字符串其余部分小写。

【讨论】：

【解决方案3】：

如果你有多个名字/单词，这将得到他们所有...

function getProperCase(sText) {
  return sText.replace(
    /([^\W_]+[^\s-]*) */g,
    function(s){
      return s.charAt(0).toUpperCase() + s.substr(1).toLowerCase();
    }
  );
}

【讨论】：

【解决方案4】：

我觉得这和 Will P 说的差不多，但是：

function ucFirst(s) {
    return s.substr(0,1).toUpperCase() + s.substr(1).toLowerCase();
}

function camelCase(s) {
    var a=s.split(" ");
    for(var i in a) a[i]=ucFirst(a[i]);
    return a.join(" ");
}

...因为您也需要姓 Cameled。（现在您可以将其绑定到 change 事件。或者任何您认为合适的地方。）

根据 Will 的说法，最终版本如下所示：

$(function () {
    $("input").on("change", function () {
        $(this).val(camelCase($(this).val()));
    });
});

希望我没有弄乱括号:)

【讨论】：

是的，您的解决方案非常适合这种情况。这就是我投赞成票的原因。