8

我想知道如何在输入区域中自动制作单词的第一个字符目前我的代码是

Name:<input type='text' name='name' class='name' placeholder='Enter your name here'/>
4

7 回答 7

24

你可以试试这个：DEMO

Name:<input type='text' name='name' class='name' style="text-transform: capitalize;" placeholder='Enter your name here'/>

或添加text-transform: capitalize;您的namein css。

于 2013-10-26T11:32:54.790 回答
6

使用 CSS (text-transform: capitalize) 的问题是，当表单提交时，名称将以小写形式提交。

CSS 适用于化妆品，但不适用于功能。

您可以使用 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>

将此代码<head> </head>放在表单所在的页面上。

以上 jQuery 还将强制所有大写字母大写。

在这里查看小提琴：https ://jsfiddle.net/cgaybba/6rps8hfo/

于 2018-01-18T13:47:30.120 回答
2

我认为还应该提到的是，如果表单是在移动设备上，您可以使用该autocapitalize属性。有关文档，请参见此处

于 2017-05-17T17:24:24.467 回答
1

试试这个

代码

<input type='text' name='name' class='name' placeholder='Enter your name here'/>

CSS 代码

<style>
 .name 
{
    text-transform:capitalize;
}
 </style>
于 2013-10-26T11:42:20.397 回答
0

更新你的CSS

.name { text-transform: capitalize; }
于 2013-10-26T11:37:22.950 回答
0

使用 JS 的好处是，当用户提交表单时，它会保留大写的输入值，但在提交表单时使用 css，它会丢失大写的值（仅限前端）。

CSS 的注意事项：确保您没有任何覆盖样式，否则请使用 !important。

//对于CSS

input { text-transform: capitalize }

//对于JS

$('.your-input').on('change keydown paste', function(e) {
    if (this.value.length = 1) {}
    var $this_val = $(this).val();
    this_val = $this_val.toLowerCase().replace(/\b[a-z]/g, function(char) {
    return char.toUpperCase();
    });
    $(this).val(this_val);
});
于 2021-09-02T23:08:23.563 回答
-1

只需包含 → style="text-transform:capitalize;" 在您的输入标签内。

于 2021-05-30T08:54:50.600 回答