Question

我有一些页面上有很长的表格。其中一些表单是预先填充的，如果表单顶部有预先填充的字段，我使用自动聚焦自动允许用户开始在该字段中键入内容。

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

以下是显示焦点输入旁边字段的代码：

$('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（为了便于修改）

我的目标是：如果输入字段旁边有一个带有自动对焦的音符，请显示音符。

有什么建议吗？

Answer 1

您可以根据是否过滤元素，它们具有自动聚焦属性，然后触发焦点事件以使焦点事件处理程序触发等但只有一个元素可以有焦点，所以可能使用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');

Answer 2

为什么不使用.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更改为您需要的任何元素。

当HTML输入使用自动对焦时，jQuery执行操作

2 个答案: