1. 홈
  2. 질의 응답
  3. 텍스트 영역/입력 상자의 문자 수를 세분화하는 우아한 방법

텍스트 영역/입력 상자의 문자 수를 세분화하는 우아한 방법

2012-06-22 3 views
3

그래서 사용자에게 입력 한 문자의 수를 동적으로 알려주고 싶습니다. "Onchange"또는 "OnKeyUp"을 사용하여 몇 가지 예를 온라인으로 보았습니다. 그러나 둘 다 오래된 예제이며 일종의 kludgy처럼 보입니다.텍스트 영역/입력 상자의 문자 수를 세분화하는 우아한 방법

더 좋은 방법이 있습니까? 변수에 값을 바인딩/할당 (올바르게이 용어를 사용하지 않을 수도 있음) 한 다음 변경이있을 때마다 확인하는 방법일까요?

출처

2012-06-22 Andrew Alexander

+1

"onchange"예제가 "kludgy"로 보이는 이유는 무엇입니까? 그들은 어떻게 생겼을 까? 외모 이외의 문제가 있습니까? 원본을 보지 못하면 코드를 더 나은 코드로 대체하기가 어렵습니다. –

답변

5

얼마나 많은 문자가 입력되었는지 동적으로 표시하는 경우 onchange 또는 onkeyup과 같은 이벤트가 필요합니다. 실제로 다른 방법은 없습니다.

"변수에 값 지정 및 변경 사항이있을 때마다 확인"이외의 방법은 onchange을 통해 확인해야 할 사항을 언제 알 수 있습니까?

이 일을 빠르고 쉬운 방법 : 명심해야 할

document.getElementById('aninputId').onchange= function(e) 
{ 
    console.log(this.value.length);//or alert(); do with this value what you want 
};

중요한 것은 당신이 요소를 많이 처리하는 경우, 당신은 이벤트를 위임 고려할 수도 있다는 것입니다. here 이벤트 위임을 처리하는 2 개의 답변으로 비슷한 (중복되지 않음) 질문을 찾을 수 있습니다. 이 강력한 기능에 대해 자세히 알아 보려면 Google!

확인 (바이올린 함께)

UPDATE, 나는 이벤트 위임을 사용하는 예로서 this quick fiddle을 설정합니다. onchange을 사용했기 때문에 포커스가 없어 질 때까지 길이가 표시되지 않습니다. 코드의 내용을 알려주는 약간의 설명이 있지만 서둘러 작성했습니다. 이 예와 관련하여 질문이 있으면 알려주십시오.

PS : 당신이 실시간으로에서 변경할 수있는 길이를 원한다면 그냥 더

mainDiv.addEventListener('keyup',showLength,false);

아무것도

mainDiv.addEventListener('onchange',showLength,false);

교체!

갱신 2는

마지막 코멘트에 대한 응답 : 아니, 그 코드가 작동하지 않습니다. alert(e); 행은 event object에 경고하려고하므로 IE에 undefined이 아닌 경우 '[object object]'만 표시됩니다.

하는 것은 당신이 내 jsfiddle의 코드가 무엇을하는지에 대한 이해를 돕기 위해, 나는 그것을 분해하고 그것을 통해 이동 단계를 단계가 있습니다 :

내 예에서

, 입력 필드 (1 만있다하지만이 가질 수 되었습니다 100) 모든 주요 div 요소 #allInputs의 하위 항목입니다. 먼저 해당 요소에 대한 참조를 얻습니다.

var mainDiv = document.getElementById('allInputs');//Here's where we'll listen for events

그런 다음 해당 div에 연결된 이벤트 수신기를 원합니다.IE의 이벤트 버블 링 및 다른 모든 브라우저의 이벤트 캡처로 인해이 요소 내에서 트리거되는 모든 이벤트는 div에 의해 전달됩니다. Here은 그 의미를 분명히 할 수있는 몇 가지 다이어그램입니다. 이것은 이벤트 위임의 중요한 개념입니다. 일단 당신이 이것을 얻으면, 나머지는 쉽습니다.

이제 다시 이벤트 수신 대기로 돌아갑니다. addEventListener은 주석에 표시된대로 작동합니다. 요소에 연결되어 해당 요소 내에서 실행/전달 된 이벤트를 수신합니다. 해당 이벤트가 지정된 유형 인 경우 함수를 호출합니다. 이 함수는 콜백 또는이 경우 이벤트 처리기라고합니다. 항상 IE는 다른 모든 브라우저와 같이 작동하지 않으므로 먼저 addEventHandler 메서드를 사용할 수 있는지 확인합니다. 두 경우 모두 

if (!(mainDiv.addEventListener)) 
{//if not: this is the IE way 
    mainDiv.attachEvent('onfocusout',showLength); 
} 
else 
{ 
    mainDiv.addEventListener('change',showLength,false); 
}

는 첫 번째 인수는 이벤트 유형의 이름에서 on을 삭제 addEventListener 대부분의 경우 우리가 듣고 싶은 이벤트 유형을 알리는 문자열입니다. IE는 다시 완고함으로 onchange 이벤트를 위임 할 수 없습니다 (거품이 발생하지 않음). 다른 이벤트를 청취하여이 문제를 해결합니다. IE 자체 onfocusout 이벤트 (입력 요소가 포커스를 잃으면 가장 가능성이 높습니다. 입력에 사용되었고 새로운 값이 있습니다. 값 길이를 확인하는 것이 가장 좋은 순간입니다.
addEventListener은 캡쳐의 세 번째 매개 변수를 가지므로이 경우에는 관계가 없지만 quirksmode (링크 이상), 당신은이 주제에 대한 자세한 내용을보실 수 있습니다, 나는 당신이 좋습니다. 

function showLength(e) 
{ 
    e = e || window.event; 
    var target = e.target || e.srcElement;//ie== srcElement, good browsers: target 
    if (target.tagName.toLowerCase() === 'input' && target.type === 'text') 
    { 
     document.getElementById(target.id + 'Span').innerHTML = target.value.length; 
    } 
}

을 이제 실제 콜백. 당신은 다른 기능을하는 것처럼,이 기능을 선언하고이 경우에, 1 개 인수를 지정또는 event - 당신이 부르는 것이 중요하지 않습니다. (여러 가지 주장이 가능하지만, 우리는 클로저에 들어가야 만합니다. 여기서는 기본을 고수하겠습니다.)
이벤트 개체는 대부분의 브라우저에서 호출 될 때 처리기 함수에 전달되며이 개체를 전달하지 않는 브라우저를 추측합니까? 예, 우리의 오랜 친구 IE,하지만 쉬운 수정의 :

if (e === undefined) 
{ 
    e = window.event; 
}

이유 : 함수 e = e || window.event;의 첫 번째 줄은 다음과 같이 쓸 수있다? 우리의 친한 친구 인 Internet Explorer가 이벤트 개체를 처리기에 전달하지 않고 대신 window.event을 통해 액세스 할 수있는 전역 개체에 유지합니다.

다음으로 필요한 것은 이벤트가 트리거 된 요소를 파악하는 것입니다. 20 개의 입력 필드, 10 개의 라디오 버튼 및 16 개의 선택 요소가있는 양식이 있다고 가정하면 div#allInputs 레벨에서 이벤트를 감지하고이 요소 내에서 이벤트가 설정되었음을 알 수 있습니다. 다행히도 이벤트 객체에는 필요한 요소에 대한 참조를 보유하는 속성이 있습니다.

var target = e.target || e.srcElement;

다시 말하지만 IE는 다릅니다. quirksmode 페이지에 있던 내용을 읽었을 때 (기억하고 있다면) IE 이벤트는 요소 레벨에서 먼저 트리거 된 다음 DOM에서 위로 올라가고 모든 W3C 브라우저는 최상위 레벨에서 이벤트를 전달하고 전달합니다 아래로 실제 요소. W3C 이벤트가 전달되고 target 요소를 찾고, IE 이벤트가 요소에 전달되고, 해당 소스에서 거품이납니다. - 나는 떠돌아 다닙니다.

이 단계에서 무엇을 압니까? 우리가 알아야 할 모든 것, 정말로. 우리는 어떤 사건이 해고되었는지를 알고있다. (e.type는 우리에게 이것을 말할 것이다 -이 경우에는 변경 또는 초점 이탈).어떤 요소가 포커스를 변경/잃어 버렸고 변수 target에 해당 요소에 대한 참조가 있으므로 값 (target.value), ID (target.id) 및 더 중요한 것은 우리가 원하는지 확인할 수 있습니다. 더 이상 할 일 :

if (target.tagName.toLowerCase() === 'input' && target.type === 'text')

30 자 이상의 요소를 처리하는 상황에 대해 이야기했지만 모든 텍스트 입력이 아닌 것을 기억하십시오. select 요소에서 새 옵션을 선택하면 select 속성의 value 속성 길이를 표시하지 않으니까? 따라서 target이 input 태그인지 확인합니다.
이 여전히 모든 입력 요소 상상할 수, 그래서 또한 target 텍스트 입력이 우리가 길이가 표시됩니다 경우에만, 그 형태 여부를 확인하도록 할 수 있습니다 :

document.getElementById(target.id + 'Span').innerHTML = target.value.length; 
//or, if you want: 
alert(target.value.length);

직접 바인딩을 통해이의 장점을 무엇을 사건들? 다시 말하면, 변경 이벤트를 여러 요소에 개별적으로 바인딩하는 경우 사용자 은입니다. 추가 보너스로 : 선택, 텍스트 입력, 라디오, ... 모두의 변경 이벤트는 1 개의 함수로 처리 할 수 ​​있습니다. 스위치 문장 만 있으면됩니다. 대신에 :

if (target.tagName.toLowerCase() === 'input' && target.type === 'text') 
{ 
    document.getElementById(target.id + 'Span').innerHTML = target.value.length; 
}

이 시도 : 당신이 볼 수 있듯이

if (target.tagName.toLowerCase() === 'select') 
{ 
    alert('You\'ve selected option number: ' + (target.selectedIndex + 1)); 
} 
if (target.tagName.toLowerCase() !== 'input') 
{//suppose I only want to deal with input and select elements 
    return; 
} 
switch(target.type) 
{ 
    case 'text': 
     alert(target.value.length);//alerts length of input value 
     return;//this event is done, return 
    case 'radio': 
     alert('The radio button is ' + (target.checked ? '' : 'un') + 'checked'); 
     return; 
    case 'password': 
     if (target.value.length < 8) 
     { 
      alert('The password is too short, add '+(8 - target.value.length)+'chars'); 
      return; 
     } 
     var verifyPass = 'passIn_' + (target.id.match(/_1$/) ? '2' : '1'); 
     verifyPass = document.getElementById(verifyPass); 
     if (verifyPass.value.length > 0 && target.value.length > 0 && verifyPass.value !== target.value) 
     { 
      alert('password confirmation failed'); 
     } 
} 
return;

는, 이벤트의 톤은 1 이벤트 리스너를 결합, 하나의 기능으로 처리 할 수 ​​있습니다. 직접 바인드하는 경우 많은 수의 처리기를 바인딩해야하며 유지 관리하기가 더 어려워 질 수있는 여러 함수를 작성해야 할 수도 있습니다. 즉, 사이트를 사용자가 느리게 만듭니다.

좋아, 이제 끝났습니다. 그리고 침대를 준비했습니다. 나는 이것이 당신을 위해 약간을 지워주기를 바란다. 이 드리블이 당신에게 명확하지 않은 경우 quirksmode, google에 이벤트 위임에 대한 자습서를 읽으십시오.하지만 내가 제공 한 코드에 대한 적절한 설명을 제공해주기를 바란다. 이벤트 위임이 왜 그런지에 대한 통찰력을 주었으면한다. 일을하는 올바른 방법, 그리고 왜 화면 뒤에서 - 대부분의 도서관이 이런 방식으로 작동합니다.
이해할 수없는 코드를 포함하는 것을 정말로 꺼려한다면 jQuery가 거의 모든 이벤트를 위임한다는 사실을 아는 것이 유용 할 수 있습니다.

출처

2012-06-22 18:02:01

+0

내가 보았던 onchange가 폼 코드에 직접 삽입되었는데, 그 코드는 kludgy라고 느꼈다. –

+1

아하, 그래, 그건 조금 (트랏처럼 들리고 싶지 않은) 1990 년대;). 이벤트 위임은 IMHO가 진행하는 방식입니다. 1 이벤트 핸들러를 사용하면 클라이언트 측을 허물지 않고 전체 페이지의 모든 변경 이벤트를 처리 할 수 ​​있습니다. 그리고 더 많은 것은 무엇입니까? 그것은 쉽습니다 ... 정말로, 일단 당신이 그것에 익숙해지면 정말 쉽습니다! 무엇보다도 : 라이브러리가 필요하지 않습니다 (플러그인은 말할 것도 없습니다). –

+0

나는 쉽고 좋은 코딩 방법을 원합니다! 나는 항상 초보자/중급자 일지라도 내가 할 수있는 최고의 코더가되기 위해 항상 노력하고있다. –

0 

$('input[name='the name of the input']').bind('keyup',function(){ 
$('#show').val($(this).length) 
});

출처

2012-06-22 18:12:25 Xenione

관련 문제

 관련 문제