Html 使输入中每个单词的第一个字符大写
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19606178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
make first character of each word capital in input
提问by
I was wondering how can i automatically make first character of the word in an input area Currently my code is
我想知道如何在输入区域中自动生成单词的第一个字符目前我的代码是
Name:<input type='text' name='name' class='name' placeholder='Enter your name here'/>
回答by
回答by cgaybba
The problem with using CSS (text-transform: capitalize) is that when the form gets submitted, the name will be submitted with a lowercase name.
使用 CSS (text-transform: capitalize) 的问题在于，当表单被提交时，名称将以小写名称提交。
The CSS works well for cosmetics but not for functionality.
CSS 适用于化妆品，但不适用于功能。
You can use jQuery to force capitalization functionality in your input boxes:
您可以使用 jQuery 在输入框中强制使用大写功能：
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$('.name').keyup(function(event) {
var textBox = event.target;
var start = textBox.selectionStart;
var end = textBox.selectionEnd;
textBox.value = textBox.value.charAt(0).toUpperCase() + textBox.value.slice(1).toLowerCase();
textBox.setSelectionRange(start, end);
});
});
</script>
Put this code between the <head> </head>on the page where your form is located.
将此代码<head> </head>放在表单所在页面上的之间。
Above jQuery will also force ALL CAPS to Capitalize.
上面的 jQuery 也将强制所有大写字母大写。
Check out the Fiddle here: https://jsfiddle.net/cgaybba/6rps8hfo/
在这里查看小提琴：https: //jsfiddle.net/cgaybba/6rps8hfo/
回答by samnau
I think it should also be mentioned that if the form is on mobile, you can just use the autocapitalizeattribute. see here for documentation
我认为还应该提到的是，如果表单在移动设备上，您可以只使用该autocapitalize属性。请参阅此处获取文档
回答by Sonya Krishna
Try this
尝试这个
HTML CODE
代码
<input type='text' name='name' class='name' placeholder='Enter your name here'/>
CSS CODE
代码
<style>
.name
{
text-transform:capitalize;
}
</style>
回答by Vinod
Update you css
更新你的css
.name { text-transform: capitalize; }
