简体   繁体   English

如何在鼠标悬停事件上获取当前文本光标位置?

[英]How to get the current text cursor position on a mouse hover event?

I'm creating a hidden contact form that would appear when the mouse is positioned above the element.我正在创建一个隐藏的联系表单,当鼠标位于元素上方时会出现该表单。 This is quite simple and I have achieved it by doing:这很简单,我通过以下方式实现了它:

$(document).ready(function(){   
  $(function (){
    $("#contact_1").hover(
      function(){ $(this).stop(true,false).animate({right:  0}, 500); },
      function(){ $(this).stop(true,false).animate({right: -218}, 500); });
  });
});

Now the problem is that when the user will go over the input elements or textarea and start writing their details, they might move the mouse out of the container (quite likely they would).现在的问题是,当用户浏览 input 元素或 textarea 并开始编写他们的详细信息时,他们可能会将鼠标移出容器(很可能会)。

How can I prevent the form from hiding in this case?在这种情况下,如何防止表单隐藏?

I would guess adding some conditional functions (if/else) within the "hover" functions, but how can I get the current text cursor position?我猜想在“悬停”函数中添加一些条件函数(if/else),但是如何获取当前文本光标位置?

The contact form ( #contact_1 ) contains 4 elements inside ID: #cf_name , #cf_email , #cf_phone , #cf_text联系表单 ( #contact_1 ) 在 ID 中包含 4 个元素: #cf_name#cf_email#cf_phone#cf_text

Please note: I want to avoid the users from having to click on a "show/hide" button请注意:我想避免用户点击“显示/隐藏”按钮

*may be it is a simple query, but I can't find a clear answer anywhere. *可能是一个简单的查询,但我在任何地方都找不到明确的答案。

------------------------------ ------------------------------

SOLUTION:解决方案:

Thanks to Diodeus help below I managed to solve it like this:感谢下面的 Diodeus 帮助,我设法解决了这个问题:

Every input has the onfocus / onblur actions:每个输入都有onfocus / onblur动作:

<input type="text" id="cf_name" class="text" name="name" onfocus="allowcfhide=false;" onblur="allowcfhide=true;" />

The hover script was modified:修改悬停脚本:

var allowcfhide=true;
$(document).ready(function(){   
  $(function (){
    $("#contact_1").hover(
      function(){ if (allowcfhide) $(this).stop(true,false).animate({right:  0}, 500); },
      function(){ if (allowcfhide) $(this).stop(true,false).animate({right: -218}, 500); });
  });
});

Have a flag at the start of your animation that will cause it to return.在你的动画开始时有一个标志,它会导致它返回。 When any input gets focus, set the flag.当任何输入获得焦点时,设置标志。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM