입력 상자의 텍스트를 대문자로 표시하는 방법은 무엇입니까? (코드 예)

이 글의 내용은 입력창의 텍스트를 강제로 대문자로 표시하는 방법을 소개하는 것입니다. (코드 샘플) 모두가 대문자로 강제 변환하는 다양한 방법을 익힐 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

때때로 양식의 특정 입력 또는 텍스트 영역 필드에는 대문자 텍스트만 허용하고 싶을 때가 있습니다. 그렇다면 입력된 소문자를 대문자 텍스트로 강제 변환하려면 어떻게 해야 합니까? JavaScript부터 CSS, 서버측 코드까지 실제로 이 성가신 문제를 해결하는 방법은 많습니다.

간단한 코드 예시를 통해 구현 방법을 살펴보겠습니다.

1. 입력하는 동안 JavaScript를 사용하여 텍스트 변경(영문 입력 필수)

대문자로 변환하려면 toUpperCase() 사용

이것은 가장 명확하고 일반적인 방법이지만 사용자 친화적이지 않습니다. 방법. 키를 누를 때마다 JavaScript 이벤트가 발생하여 값을 대문자로 변환합니다.

<input type="text" onkeyup="this.value = this.value.toUpperCase();">

효과를 살펴보겠습니다. 소문자 'a'를 입력하면 다음과 같이 나타납니다.

그러나 이 방법에는 다른 문제가 있습니다.

1. 문자를 입력할 경우 중복된 문자가 나타나므로 반드시 영문을 사용해야 합니다.

2. 위 입력창에 "AAA"를 입력해보시고, 가운데 "A"를 선택하여 "ABBA"로 변경해보세요. 값을 설정하면 커서가 텍스트 끝으로 이동하므로 결국 'ABAB'가 됩니다.

다음에는 커서 위치 지정

을 개선해 보겠습니다. 텍스트에서 커서를 이전 위치로 이동하고 입력하면 입력한 텍스트의 마지막 부분까지 에코됩니다. 따라서 커서 위치를 유지하려면 추가 코드가 필요합니다:

<input type="text" onkeyup="
  var start = this.selectionStart;
  var end = this.selectionEnd;
  this.value = this.value.toUpperCase();
  this.setSelectionRange(start, end);
">

효과를 보려면 ss:

를 입력하고 "AAA"를 입력할 때 중간 "A"를 선택하고 "ABBA"로 변경해 보세요. " , 'ABAB' 결과는 더 이상 표시되지 않습니다.

2. CSS+php를 사용하여 텍스트 변경

사실 양식 입력이 대문자인지 소문자인지는 중요하지 않습니다. 중요한 점은 다음과 같습니다.

1. 사용자에게 표시되는 텍스트가 사용됩니다.

2. 양식 처리기는 사용하기 전에 텍스트를 대문자로 변환합니다.

이를 염두에 두고 이전 JavaScript를 모두 버리고 대신 간단한 CSS 및 PHP(또는 이에 상응하는 백엔드) 솔루션을 사용할 수 있습니다.

html+css 코드

<input style="text-transform: uppercase;" type="text" name="fieldname">

php 코드:

<?PHP
  $_POST[&#39;fieldname&#39;] = strtoupper($_POST[&#39;fieldname&#39;]);
?>

효과 사진:

적절한 기술을 사용하면 얼마나 쉬운지 아시나요? 단일 CSS 스타일(외부 스타일시트로 이동 가능)과 PHP 라인이 이미 존재할 수 있습니다. JavaScript나 jQuery가 필요하지 않습니다.

요약: 위 내용은 이 글에 소개된 내용의 전부이며, 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 입력 상자의 텍스트를 대문자로 표시하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!