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

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

---

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

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

<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'다른 제안 과 결합하는 것이 바람직 할 수 있습니다 .

---

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

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" />

---

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

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

<input>

Here I am using toLocaleUpperCase() to convert input value to uppercase. It works fine until you need to edit what you had entered, e.g. if you had entered ABCXYZ and now you try to change it to ABCLMNXYZ, it will become ABCLXYZMN because after every input the cursor jumps to the end.

To overcome this jumping of the cursor, we have to make following changes in our function:

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>

Now everything works as expected, but if you have slow PC you may see text jumping from lowercase to uppercase as you type. If this annoys you, this is the time to use CSS, apply input: {text-transform: uppercase;} to CSS file and everything will be fine.

---

<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)">

참고URL : https://stackoverflow.com/questions/11100041/how-do-you-automatically-set-text-box-to-uppercase