如何知道javascript的輸入位置

Question

我看到這個驗證插件http://demos.usejquery.com/ketchup-plugin/我想知道，你如何確定輸入的位置？有了這個插件，你可以看到，顯示一條消息，但是它是如何知道錯誤輸入的確切位置並將消息恰好放在那裏？

Answer 1

後你得到的元素（可能通過ID），在原始的JavaScript：

element.offsetLeft 
element.offsetTop 

或用jQuery的跨瀏覽器.offset()功能。

驗證Html5已經這樣做了。您並不需要使用Javascript進行驗證。也有pollyfills可用，當瀏覽器不支持html5表單驗證時，可以使用它。

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/