Javascript jquery检查项目是否处于焦点位置,如果没有,则对其进行操作
当点击文本框周围的div时,我有一个向下滑动的区域,这个区域会显示另一个文本框和一个按钮…基本上是提交问题的所有控件(标题、内容、提交按钮) 但是,如果用户单击了除两个文本框或按钮之外的任何内容,我希望显示的区域向上滑动 我需要的是一个jquery方法来调用两个文本框和按钮的onBlur,以检查文本框或按钮是否不在焦点位置,这将向上滑动(.slideUp)该区域 我如何使问题内容向下滑动非常简单Javascript jquery检查项目是否处于焦点位置,如果没有,则对其进行操作,javascript,c#,jquery,html,asp.net,Javascript,C#,Jquery,Html,Asp.net,当点击文本框周围的div时,我有一个向下滑动的区域,这个区域会显示另一个文本框和一个按钮…基本上是提交问题的所有控件(标题、内容、提交按钮) 但是,如果用户单击了除两个文本框或按钮之外的任何内容,我希望显示的区域向上滑动 我需要的是一个jquery方法来调用两个文本框和按钮的onBlur,以检查文本框或按钮是否不在焦点位置,这将向上滑动(.slideUp)该区域 我如何使问题内容向下滑动非常简单 $(function () { $('.QuestionConten
$(function () {
$('.QuestionContentExpandClick').click(function () {
/**** Slide the content div ****/
var viewContent = $('#DivExpandQuestionContentArea');
viewContent.slideDown('slow', function () {
});
});
});
这是正在使用的.net控件
<asp:PlaceHolder ID="PhdTopQuestionArea" runat="server">
<div class="KBTopQuestionContainer">
<asp:TextBox ID="TxtQuestionReference" CssClass="QuestionReference" runat="server" />
<asp:HiddenField ID="HidQuestionTracker" runat="server" />
<table class="Table100PercentWidth">
<tr>
<td id="TbcKBTopQuestionImageCell" runat="server" class="KBTopQuestionImageCell">
<asp:HyperLink ID="HlkAskQuestionProfileImage" runat="server">
<asp:Image ID="ImgAskQuestionProfileImage" runat="server" CssClass="KBTopQuestionImage" />
</asp:HyperLink>
</td>
<td>
<div class="KBTopQuestionContainerDiv">
<div id="DivExpandQuestionClickArea" runat="server">
<asp:HyperLink ID="HlkAskQuestionRedirect" runat="server" EnableViewState="false">
<asp:TextBox ID="TxtAskQuestionTitle" runat="server" CssClass="KBTopQuestionTitleTextbox" Text="Ask a Question about this topic..."
onfocus="feedbackTextBoxFocus(this,'Ask a Question about this topic...')" onblur="feedbackTextBoxBlur(this,'Ask a Question about this topic...')" />
</asp:HyperLink>
</div>
<div id="DivExpandQuestionContentArea" style="display:none;">
<div style="margin-top:15px;">
<asp:TextBox ID="TxtAskQuestionContent" runat="server" TextMode="MultiLine" Rows="7" CssClass="KBTopQuestionContentTextbox" Text="Add the content for your question..."
onfocus="feedbackTextBoxFocus(this,'Add the content for your question...')" onblur="feedbackTextBoxBlur(this,'Add the content for your question...')" />
</div>
<div style="text-align:right;margin-top:10px;">
<asp:Button ID="BtnAskQuestion" runat="server" CssClass="KBTopQuestionButton" Text="Post Question" OnClick="BtnAskQuestion_Click" />
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
提前感谢您的帮助:)基于上面提供的代码,我有点困惑,但要回答您的基本问题,您可以使用
document.activeElement
检查元素是否处于焦点位置。因此,如果您有一个id为TxtQuestionReference
的文本区域,您的代码将如下所示:
var textbox = document.getElementById('TxtQuestionReference'):
if (document.activeElement === textbox) {
// do stuff
} else {
// do other stuff
}
诀窍在于查看控件将要从
focusout
事件内部获取焦点
要做到这一点,请使用带有微小延迟的setTimeout
,将检查置于下一个浏览器JS周期(此时下一个项目被聚焦)
您还可以在此处查看我的答案以了解更多详细信息:
$('#DivExpandQuestionContentArea input').focusout(function () {
var $container = $(this).closest('#DivExpandQuestionContentArea');
// wait for the new element to be focused
setTimeout(function () {
// See if the new focused element is in the editor
if ($.contains($container[0], document.activeElement)) {
// we are still focused on the group of controls
}
else
{
// we are not focused on this group
}
}, 1); // Wait 1 cycle (0 should work just as well, but not tested)
});