css 在输入时将每个单词的第一个字符大写

lkaoscv7 于 2023-07-01 发布在其他

关注(0)|答案(8)|浏览(115)

我想知道我怎么能自动使第一个字符的字在输入区目前我的代码是

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

css

来源：https://stackoverflow.com/questions/19606178/make-first-character-of-each-word-capital-in-input

8条答案

按热度按时间

sh7euo9m1#

你可以试试这个：DEMO

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

或者在css中的name中添加text-transform: capitalize;。

赞(0）回复(0）举报 2023-07-01

dgjrabp22#

使用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也会强制所有大写字母大写。
在这里查看Fiddle：https://jsfiddle.net/cgaybba/6rps8hfo/

赞(0）回复(0）举报 2023-07-01

sdnqo3pr3#

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

赞(0）回复(0）举报 2023-07-01

zzoitvuj4#

试试这个

HTML代码

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

CSS CODE

<style>
 .name 
{
    text-transform:capitalize;
}
 </style>

赞(0）回复(0）举报 2023-07-01

k2arahey5#

jQuery.noConflict();
jQuery(document).ready(function($) {
  $('.contact_person_name').keyup(function(event) {
    var textBox = event.target;
    var start = textBox.selectionStart;
    var end = textBox.selectionEnd;
    
    // Capitalize the first letter of each word after a space
    textBox.value = textBox.value.toLowerCase().replace(/(?:^|\s)\w/g, function(match) {
      return match.toUpperCase();
    });
    
    textBox.setSelectionRange(start, end);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<input type="text" class="contact_person_name" id="contact_person_name" name="contact_person_name">

赞(0）回复(0）举报 2023-07-01

kzipqqlq6#

更新你的CSS

.name { text-transform: capitalize; }

赞(0）回复(0）举报 2023-07-01

bis0qfac7#

使用JS的好的一面是，当用户提交表单时，它保留了大写的输入值，但是当表单提交时使用css，它会丢失大写的值（仅适用于前端）。
CSS注意事项：确保你没有任何其他人使用的覆盖样式！很重要
//对于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);
});

赞(0）回复(0）举报 2023-07-01

oxalkeyp8#

只需include → style=“text-transform：capitalize;“在您的输入标记中。

赞(0）回复(0）举报 2023-07-01