如何知道输入位置与javascript

how to know input position with javascript

本文关键字：javascript 位置 输入 何知道      更新时间：2023-09-26

我看到这个验证插件http://demos.usejquery.com/ketchup-plugin/，我想知道，你怎么能确定输入的位置?使用该插件，您可以注意到，显示一条消息，但它如何确切地知道输入错误的位置，并将消息准确地放在那里?

这个插件的源代码，特别是错误消息容器的源代码是这样的:

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/

获取元素(可能通过id)后，在原始JavaScript中:

element.offsetLeft
element.offsetTop

或者使用jQuery的跨浏览器。offset()函数

对于验证，Html5已经这样做了。实际上并不需要使用Javascript进行验证。当浏览器不支持html5表单验证时，也可以使用polyfills来填充它。
相关文章：