javascript - 关注ajax调用后div中显示的成功消息

Question

    Div tag in jsp : <div class="okStatusText" id="message"></div>

    code in ajax call:
           if ("SUCCESS" ==result) {
    document.getElementById("message").innerHTML = "Data saved successfully";
     }

我正在页面顶部显示此消息，并且我希望在显示此消息时将焦点集中在该消息上。

Answer 1

在 div 上应用 focus() 没有任何意义。只需执行

即可使 input 等元素成为 focus

$('input').focus(); 

这只是一个例子。在您的情况下，如果您想要集中注意力或实际上想要突出显示消息，您只需更改 background-color 或 color 即可。

 $("#message").html("Data saved successfully").css({'background-color':'blue'});

或者

 $("#message").html("Data saved successfully").css('color','blue');

如果您希望用户无需向上滚动即可直接看到消息，请尝试此

   $('html,body').animate({
        scrollTop: $(this).offset().top - 50
   },1000);

值 50 可以根据您想要滚动的高度而变化。您可以将此值更改为任何值，然后检查哪个值适合您的情况。完成此操作后，您可以将 CSS 应用到您的消息中，使其看起来更明显。

希望这次我能帮上忙。

谢谢!!