Question

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

Answer 1

此插件的源代码，特别是错误消息容器的源代码如下所示：

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/

Answer 2

在获得元素（可能是id）后，在原始JavaScript中：

element.offsetLeft
element.offsetTop

或者使用jQuery的跨浏览器.offset()功能。

对于验证，Html5已经这样做了。你真的不需要用Javascript进行验证。当浏览器不支持html5表单验证时，还有pollyfills可用，以支持html5表单验证。

如何用javascript知道输入位置

2 个答案: