텍스트 상자를 대문자로 자동 설정하는 방법

다음 스타일 속성을 사용하여 사용자 입력을 대문자로 설정하여 사용자가 텍스트 상자에 입력을 시작할 때 예를 들어 railwayRAILWAY Caps-lock 버튼을 누르지 않고도 대문자로 변경해야 합니다.

이것은 입력에 사용하는 코드입니다.

<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0" style='text-transform:uppercase'/>

그러나이 속성을 사용하여 원하는 출력을 얻지 못했습니다.

당신은 넣어 한 style온 속성을 <img>대신에, 태그 <input>.

속성 이름과 값 사이에 공백을 두는 것도 좋지 않습니다 ...

<input type="text" class="normal" 
       name="Name" size="20" maxlength="20" 
       style="text-transform:uppercase" /> 
<img src="../images/tickmark.gif" border="0" />

이 변환은 순전히 시각적이며 POST에서 전송 된 텍스트를 변경하지 않습니다.

대문자로 게시되도록하는 가장 강력한 솔루션은 다음과 같이 oninput 메서드를 인라인으로 사용하는 것입니다.

<input oninput="this.value = this.value.toUpperCase()" />

편집하다

일부 사람들은 값을 편집 할 때 커서가 끝으로 이동한다고 불평 했으므로이 약간 확장 된 버전은

<input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" />

text-transformation:uppercase스타일링에 대한 답변 은 제출시 서버에 대문자 데이터를 보내지 않습니다. 대신 다음과 같이 할 수 있습니다.

입력 HTML의 경우 onkeydown을 사용하십시오.

<input name="yourInput" onkeydown="upperCaseF(this)"/>

자바 스크립트에서 :

function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}

으로 upperCaseF()모든 키를 눌러 내려 함수 입력의 값은 대문자 형태로 전환 할 것이다.

또한 키 다운 이벤트가 발생한 후 함수 코드 블록이 트리거되도록 1ms 지연을 추가했습니다.

첫 번째 대답의 문제는 자리 표시 자도 대문자라는 것입니다. 입력 만 대문자로하려면 다음 해결 방법을 사용하십시오.

비어 있지 않은 입력 요소 만 선택하려면 요소에 필수 속성을 넣으십시오.

<input type="text" id="name-input" placeholder="Enter symbol" required="required" />

이제 선택하려면 :valid의사 요소를 사용하십시오 .

#name-input:valid { text-transform: uppercase; }

이렇게하면 대문자 만 입력됩니다.

시험

<input type="text" class="normal" 
       style="text-transform:uppercase" 
       name="Name" size="20" maxlength="20"> 
 <img src="../images/tickmark.gif" border="0"/>

이미지가 아닌 입력에 쓰고 있기 때문에 이미지 대신 스타일 태그를 입력하십시오.

모든 텍스트 상자를 대문자로 설정하려면 다음 스타일 설정

input {text-transform: uppercase;}

CSS 스타일링의 문제는 데이터를 변경하지 않고 JS 기능을 원하지 않으면 시도해보십시오 ...

<input onkeyup="this.value = this.value.toUpperCase()" />

그 자체로는 필드가 키업을 활용하는 것을 볼 수 있으므로 이것을 style='text-transform:uppercase'다른 제안 과 결합하는 것이 바람직 할 수 있습니다 .

CSS를 사용 text-transform: uppercase하면 실제 입력이 변경되지 않고 모양 만 변경됩니다. 입력 데이터를 서버로 보내면 여전히 소문자이거나 입력 한 것입니다. 실제로 입력 값을 변환하려면 아래와 같이 자바 스크립트 코드를 추가해야합니다.

document.querySelector("input").addEventListener("input", function(event) {
  event.target.value = event.target.value.toLocaleUpperCase()
})

<input>

여기 toLocaleUpperCase()에 변환 하는 데 사용 하고 있습니다input 값을 대문자 있습니다. 입력 한 내용을 편집해야 할 때까지 잘 작동합니다. 예를 들어 ABCXYZ를 입력 한 후 ABCLMNXYZ로 변경하려고하면 모든 입력 후 커서가 끝으로 이동하기 때문에 ABCLXYZMN이됩니다.

커서의이 점프를 극복하기 위해 우리는 기능을 다음과 같이 변경해야합니다.

document.querySelector("input").addEventListener("input", function(event) {
  var input = event.target;
  var start = input.selectionStart;
  var end = input.selectionEnd;
  input.value = input.value.toLocaleUpperCase();
  input.setSelectionRange(start, end);
})

<input>

이제 모든 것이 예상대로 작동하지만 PC 속도가 느리면 입력 할 때 소문자에서 대문자로 텍스트가 이동하는 것을 볼 수 있습니다. 이것이 당신을 귀찮게한다면, 이것은 CSS를 사용할 때이며 input: {text-transform: uppercase;}CSS 파일에 적용 하면 모든 것이 잘 될 것입니다.

이것은 입력을 대문자로 표시하고 포스트를 통해 입력 데이터를 대문자로 보냅니다.

HTML

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

자바 스크립트

var someInput = document.querySelector('#someInput');
someInput.addEventListener('input', function () {
    someInput.value = someInput.value.toUpperCase();
});

아무도 그것을 제안하지 않았다 :

자리 표시 자와 함께 CSS 솔루션을 사용하려면 자리 표시자를 개별적으로 스타일 지정하면됩니다. IE 호환성을 위해 두 자리 표시 자 스타일을 분할하십시오.

input {
    text-transform: uppercase;
}
input:-ms-input-placeholder {
    text-transform: none;
}
input::placeholder {
    text-transform: none;
}

The below input has lowercase characters, but all typed characters are CSS-uppercased :<br/>
<input type="text" placeholder="ex : ABC" />

아래 해결책을 시도하십시오. 사용자가 첫 번째 색인의 입력 필드에 빈 공간 만 입력하면주의를 기울입니다.

document.getElementById('capitalizeInput').addEventListener("keyup",   () => {
  var inputValue = document.getElementById('capitalizeInput')['value']; 
  if (inputValue[0] === ' ') {
      inputValue = '';
    } else if (inputValue) {
      inputValue = inputValue[0].toUpperCase() + inputValue.slice(1);
    }
document.getElementById('capitalizeInput')['value'] = inputValue;
});

<input type="text" id="capitalizeInput" autocomplete="off" />

<script type="text/javascript">
    function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}
</script>

<input type="text" required="" name="partno" class="form-control" placeholder="Enter a Part No*" onkeydown="upperCaseF(this)">