1

我有几页有很长的表格。其中一些表单是预先填充的，如果表单顶部有一个预先填充的字段，我使用自动对焦来自动允许用户开始在该字段中输入。

除了这些字段之外，我偶尔还会在字段旁边弹出“注释”，以提供更多关于他们输入内容的指导。这些注释仅在用户专注于输入字段时出现。

这是在焦点输入旁边显示字段的代码：

$('input[type="text"]').focus(function(){
    var hasCont = $(this).parent().siblings('.cont-note').length;
    if(hasCont == 1){
        $(this).parent().siblings('.cont-note').fadeIn(400);    
    }
});

不幸的是，这不适用于 html 输入的自动对焦。我想避免使用jQuery专注于一个字段，我宁愿使用html（为了便于修改）

我的目标是：如果在具有自动对焦的输入字段旁边有注释，则显示注释。

有什么建议么？

4

2 回答 2

3

您可以根据元素是否具有 autofocus 属性来过滤元素，然后触发焦点事件以使焦点事件处理程序触发等。但是只有一个元素可以具有焦点，因此使用 first() 可能会很好主意 ？

$('input[type="text"]').focus(function(){
    var hasCont = $(this).parent().siblings('.cont-note').length;
    if(hasCont == 1){
        $(this).parent().siblings('.cont-note').fadeIn(400);    
    }
});

$('input[type="text"]').filter(function() {
    return $(this).prop('autofocus');
}).first().trigger('focus');
于 2013-03-14T17:22:12.850 回答
0

为什么不使用 .attr() 函数？您为输入字段提供一个名为 noteID 的额外属性，并在获得焦点时使用 .attr() 函数来获取 ID。现在您可以选择而不必在 DOM 中四处寻找。

$('.hasNote').focus(function() {
    var noteID = $(this).attr("noteID");
    $('#' + noteID).fadeIn(400);
};

<input type="text" class="hasNote" id="whatever" noteID="same as the note id" />
<note id="noteID">

显然我只是在这里使用 ID，更改<note为您需要的任何元素。

于 2013-03-14T17:28:20.900 回答