키업 대문자 문제

https://stackoverflow.com/questions/2032518

19-09-2019
|

문제

KeyUp에서 대문자로 변경되는 입력을 원합니다. 그래서 KeyUp에 간단한 이벤트를 첨부합니다.

HTML

<input id="test"/>

JavaScript (jQuery 포함)

$("#test").keyup(function(){
  this.value = this.value.toUpperCase();
});

그러나 Chrome과 IE에서 왼쪽 화살표를 밀 때 커서가 자동으로 끝으로 이동한다는 것을 알았습니다. 입력이 문자 만 있는지 여부를 감지해야합니다. 감지에 키 코드 범위 또는 regexp를 사용해야합니까?

예시: http://jsbin.com/omope3

해결책

또는 다음을 사용할 수 있습니다 (아마도 더 빠르고 우아 할 것입니다).

<input style="text-transform: uppercase" type='text'></input>

그러나 이는 양식 데이터에서 AS-Typed 값을 다시 보내므로 다음 중 하나를 사용하여 데이터베이스에 올 캡으로 저장하십시오.

mysql : UPPER(str)

PHP : strtoupper()

다른 팁

텍스트 변환을 사용하는 경우 또 다른 솔루션 : 대문자; CSS 속성 :

<input id='test' style='text-transform: uppercase;' type='text'></input>

jQuery를 사용하여 선택할 수 있습니다 흐림 이벤트:

$("#test").blur(function(){
  this.value = this.value.toUpperCase();
});

이 솔루션을 사용하면 데이터베이스 필드를 상단 할 필요가 없으며 이동에 커서를 사용할 수 있으며 사용자는 입력 필드에 텍스트를 삽입/다시 작성할 수 있습니다.

이것을 사용하십시오 :

<input onkeyup="MakeMeUpper(this)" type="text"/>

JS 코드 부품에서 다음 :

function MakeMeUpper(f, e){ 
  var actualValue = f.value;        
  var upperValue = f.value.toUpperCase();
  if( actValue != upperValue){
    f.value = upperValue;       
  }   
}

사용자가 텍스트 (왼쪽 또는 오른쪽 화살표)가 아닌 것을 입력 한 경우이 코드는 텍스트를 변경하지 않습니다.

예, 값이 업데이트되면 일부 브라우저가 커서를 끝으로 이동하는 것 같습니다. 당신은 이것을 할 수 있습니다 :

$("#test").keyup(function(){
  var upper = this.value.toUpperCase();
  if (this.value != upper) 
      this.value = upper;
});

변경 해야하는 경우에만 변경됩니다. 그러나 여전히 입력하면 abd, 왼쪽으로 움직이고 쳤다 c 얻기 위해 abcd, 커서는 여전히 끝으로 이동합니다.

JavaScript (jQuery 포함)

$("#test").keyup(function(){
  $(this).val($(this).val().toUpperCase());
});

var str = $(this).val();
if (evt.keyCode != 37 && evt.keyCode != 39)
{
    str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
        return letter.toUpperCase();
    });
    $(this).val(str);
}

KeyUp 함수에서 키 코드를보고 싶을 것입니다.

var UP_ARROW = 38,
    DOWN_ARROW = 40;

$('#test').keyup(function(evt){
    if (evt.keyCode == UP_ARROW)
    {
        this.value = this.value.toUpperCase();
    }

    if (evt.keyCode == DOWN_ARROW)
    {
        this.value = this.value.toLowerCase();
    }
});

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow