jQuery输入元素取消选择文本事件？

Question

可能是重复问题：
使用.select()取消输入框中已选择的文本

有没有一种方法可以通过 jQuery 检测用户取消选择输入元素中的文本？

（注意：我并不是在询问如何检测输入元素本身的失焦事件，而是关于元素内部的文本。）

我正在使用

$('#input').select(function () {...}

当用户选择文本时显示一个带有格式选项的工具栏，但我无法找出如何检测用户是否清除了选择。

有什么建议吗？

- Jesse Freeman

---

请解释“清除选择”。 - David Hellsing

Answer 1

尝试使用“模糊”事件

$('#input').on('blur',function () {
    if( this.value == ''){
         alert('Blur Event - Text box Empty');
         //Your code here
     }
});

当输入框失去焦点时，即被取消选择时，此代码将立即触发。

- Sushanth --

---

绑定到点击事件可能也很有用。 - nrodic

元素失去焦点并不一定意味着选择被清除。例如，如果用户单击页面外的某个位置（即浏览器的 URL 栏），输入字段将失去焦点，但选择仍将存在。 - CupOfTea696

但是可以通过在事件中指定条件来对此进行抵消...模糊或更改事件可以在这里完成任务。 - Sushanth --

我的问题是，当我检测到选择时，我会弹出上下文菜单，所以我失去了焦点，然后将其返回给输入字段，因此我会遇到竞争条件。我希望有一些特定的元素值或JQuery事件可以用来检测输入字段的实际选择，并验证内容是否大于0个字符。在这种特定情况下，单击和模糊不会真正起作用。如果需要，我可以详细说明。 - Jesse Freeman

Answer 2

没有真正的JavaScript事件可以检测到这一点。在这里最好的解决方案是检查模糊、聚焦、按键和鼠标按下事件。这将是最完整的解决方案，尽管它并不完美。您可以使用.on方法将其同时绑定到所有事件。

$("#input").select(function() {
    //do something here
});

$("#input").on("blur focus keydown mousedown", function() {
    //do something else here
});​

再次提醒，这不是一个完整的解决方案，因为模糊事件可能发生在不清除选择的情况下。但这是您能做的最好方式。

- CupOfTea696

---

我之前已经评论过了，但是因为这个问题很有趣，所以我会在这里再次发表。您知道是否有一种方法可以检测选择内容或字符长度吗？我可以使用它来确定选择是否已被取消。 - Jesse Freeman

第二个回调函数在用户拖动文本时被调用，但是文本在拖动后不会被取消选择。 - Hykilpikonna

Answer 3

经过一些试验，我找到了一个解决方案。以下是我的做法。我创建了一个函数，从文档中返回所选文本：

function getSelectedText() {
    return document.selection.createRangeCollection()[0].text;
}

从这里开始，我可以采用CupOfTea696的解决方案，使用jQuery的on事件绑定器，像这样:

$("#input").on("click change keyup select", function (event) {
     if(getSelectedText().length < 1)
          hideAppBar();
     else 
          showAppBar();
 });

所以我基本上是检查所选文本的长度，并根据此显示或隐藏上下文菜单。

但我仍然有一个模糊的问题，这更多地与在AppBar中触发的点击事件有关，而不是上面的解决方案。另外，我只在Win8上测试了这个解决方案，所以不确定这是否是一个有效的基于Web的解决方案，但我不认为它不能工作。

- Jesse Freeman

---

看起来是个不错的解决方案 (: - CupOfTea696