如何将文本框的首字母更改为大写

Question

如何仅使用CSS（不是每个单词的第一个字母）将文本框的第一个单词的第一个字母更改为大写

Answer 1

化妆解决方案（Pure CSS，伪造输入）

使用已被设计为输入的常规div。

#input:first-letter {
    text-tranform: uppercase;
}

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 398px;    
}

    <div id="input" contenteditable>hello world</div>

JavaScript解决方案：

将第一个字母更改为change事件中的大写字母。

var input = document.getElementById('input-field');
input.value = input.value.substr(0, 1).toUpperCase() + input.value.substr(1);

var change = input.addEventListener('change', function() {
    input.value = input.value.substr(0, 1).toUpperCase() + input.value.substr(1);
})

<input id='input-field' type='text' value='hi world'>

CSS解决方案（不适用于输入元素）

使用:first-letter伪选择器：

p:first-letter {
    text-transform: uppercase
}

<p>hello darkness my old capital</p>

Answer 2

据我所知，CSS中没有句子上限。其他答案似乎需要javascript。

如果您只希望每个元素的第一个字母都是大写的，那么这是一种粗略的方法来实现它，但它绝对不会接近实际的句子上限：

    p {
       text-transform: lowercase;
      }

    p:first-letter {
       text-transform: uppercase;
    }

<p>THIS IS THE FIRST EXAMPLE SENTENCE.</p>
<p>THIS IS THE SECOND EXAMPLE SENTENCE.
   AND THIS THE THIRD, BUT IT WILL BE ENTIRELY LOWERCASE.</p>

Answer 3

你必须写js来实现这个

＆＃13;

＆＃13;

var capitalize = function(e){
    // if the first letter is lowercase a-z
    // ** don't run the replace unless required, to permit selecting of text **
    if(this.value.match(/^[a-z]/)){
        // replace the first letter
        this.value = this.value.replace(/^./,function(letter){
            // with the uppercase version
            return letter.toUpperCase();
        });
    }
}

// listen to key up in case of typeing, or pasting via keyboard
// listen to mouseup in case of pasting via mouse
// prefer `up` events as the action is complete at that point
document.getElementById('targetBox').addEventListener('keyup', capitalize);

＆＃13;

<input type="text" id="targetBox">

＆＃13;

＆＃13;

＆＃13;