代码之家  ›  专栏  ›  技术社区  ›  SlickRed

我无法使用JS关注HTML元素

  •  -1
  • SlickRed  · 技术社区  · 1 年前

    我有一个JS函数,它执行AJAX调用来检索一些HTML数据,然后刷新<div>以及检索到的数据。

    在刷新<div>内容,我想在调用JS函数之前,将光标替换在用户关注的任何元素中。

    这是一个更大的函数的一部分,因此,为了简单起见,我只包含了我认为相关的代码:

    $.ajax({
        type: "POST",
        url: "js/v_record_refresh_ajax.php",
        data: {
            filter: filter,
            sort: sort_Val
        },
        cache: false,
        success: function(data) {
            // the following works perfectly
            $('#volCard-'+filter).html(data);
            if (msg.length > 0) {
                $('#'+msg_div).html(msg);
            }
            // end of working code
    
    
            console.log("Focus on element:");
            console.log(activeEle.id); // activeEle is the HTML element I want to focus on
            activeEle.focus();  // this does not appear to be working!
    
            // the following code (intended to place the cursor at the correct position) is also not working, probably because I am failing to focus on the active element above.
    
            // ta is a boolean indicating that the active element is either a text input or a textarea
            if (ta) {
                console.log("Put cursor at position:");
                console.log(startPos + ":" + endPos);
                activeEle.selectionStart = startPos;  // this does not appear to be working!
                activeEle.selectionEnd = endPos;  // this does not appear to be working!
    
                // alternative approach
                //curActive.setSelectionRange(startPos, endPos);
            }
        },
        error: function(xhr, status, error) {
            console.error(xhr);
            console.error(status);
            console.error(error);
        }
    });
    

    以下是控制台输出:

    Focus on element:
    sname-1
    Put cursor at position:
    0:11
    

    请注意,sname-1是我试图关注的元素(文本输入)的id。

    我还没有包括将这个元素分配给activeEle对象的代码,但我希望这个控制台输出证明activeEle是正确分配的。

    我已经考虑到这可能是某种时间问题,并尝试在关注activeEle对象之前引入延迟,但这并没有帮助(我仍然没有关注activeEle对象-“sname-1”):

    success: function(data) {
        $('#volCard-'+filter).html(data);
        if (msg.length > 0) {
            $('#'+msg_div).html(msg);
        }
        setTimeout(function(){ 
            console.log("Focus on element:");
            console.log(activeEle.id);
            activeEle.focus();
            if (ta) {
                console.log("Put cursor at position:");
                console.log(startPos + ":" + endPos);
                activeEle.selectionStart = startPos;
                activeEle.selectionEnd = endPos;
                //curActive.setSelectionRange(startPos, endPos);
            }
        }, 500);
    },
    

    我不确定如何解决此问题,因为我似乎拥有所有必要的元素:

    • 我有一个名为activeEle的文本输入对象(注意:activeEle.id成功地将元素id打印到console.log)

    • 我有光标选择的开始和结束位置(整数)

    我在控制台中没有得到任何错误,(显然)我没有把注意力集中在sname-1元素上。

    1 回复  |  直到 1 年前
        1
  •  0
  •   Daniel Dessler    1 年前

    根据您提供的代码,您无法专注于 activeEle 元素,并设置光标位置。以下是解决该问题的一些建议:

    1. 时机问题: 主动电子 元素在DOM中还不可用。请确保您正在分配 主动电子 变量。您可以将代码包装在 $(document).ready() 函数,以确保它在DOM准备好后执行。
    $(document).ready(function() {
      // Your code here
    });
    
    1. 错误的元素ID:仔细检查 主动电子 变量包含正确的元素ID。请确保ID分配代码中没有拼写错误或错误。

    2. 图元可见性:如果 主动电子 元素被隐藏或不可见,当您尝试将焦点集中在它上时,焦点操作可能会失败。通过检查元素的CSS属性(例如 display visibility

    3. 事件干扰:如果有其他事件处理程序或JavaScript函数修改的焦点或光标位置 主动电子 在您的AJAX调用之后,它们可能会干扰您的代码。检查是否有任何可能影响焦点行为的冲突代码。

    4. 浏览器兼容性:虽然很少见,但可能存在与聚焦元素或设置光标位置有关的特定于浏览器的问题。在不同的浏览器中测试代码,看看问题是否仍然存在。

    通过考虑这些点并调试代码的特定部分,您应该能够识别并解决问题。