자바 스크립트로 입력 위치를 알아내는 방법

Question

이 유효성 검사 플러그인 http://demos.usejquery.com/ketchup-plugin/을 보았습니다. 어떻게 입력 위치를 결정할 수 있습니까? 그 플러그인을 사용하면 메시지를 표시 할 수 있지만 오류가있는 입력이 정확히 어디에 있는지 정확하게 알고 메시지를 정확히 어디에 넣을 수 있습니까?

Answer 1

당신은 원시 자바 스크립트 (아마도 ID로) 요소를 얻을 후 :

element.offsetLeft 
element.offsetTop 

또는 jQuery의 크로스 브라우저 .offset() 기능

.

유효성 검사를 위해 Html5가 이미이 작업을 수행합니다. Javascript로 유효성 검사를 수행 할 필요가 없습니다. 브라우저가 지원하지 않으면 html5 양식 유효성 검사를 지원하는 pollyfills도 사용할 수 있습니다.

Answer 2

이 플러그인의 소스 코드, 오류 메시지 컨테이너에 대해 구체적으로 하나는 다음과 같습니다

createErrorContainer: function(form, el) {  
    if(typeof form == 'function') { 
    this.defaults.createErrorContainer = form; 
    return this; 
    } else { 
    var elOffset = el.offset(); 

    return $('<div/>', { 
      html : '<ul></ul><span></span>', 
      'class': 'ketchup-error', 
      css : { 
         top : elOffset.top, 
         left: elOffset.left + el.outerWidth() - 20 
         } 
      }).appendTo('body'); 
    } 
}, 

을 그래서 당신은,의 위치를 ​​가져 오기 위해 .offset() 메소드를 사용하고 볼 수 문서와 관련된 입력 필드

자세한 내용은 여기 : http://api.jquery.com/offset/