Question

我正在开发一个扩展程序，它可以侦听元素上的click事件。

现在我有两个问题：

有没有方便的方法来检测元素是否是输入元素？与HTML中的input，textarea和XUL中的textbox类似。
如果用户点击了输入元素，如何获取用户点击的位置？例如，有一个<input>元素，其值设置为blah，用户在'l'和'a'之间点击，我如何获得索引（在这种情况下它是2）？

Answer 1

每个事件都有一些数据在事件参数中与它一起传递。您可以执行以下操作来确定所点击的内容：

function clickFun(event){
    if (event.target.nodeName == "INPUT") {
        var type = event.target.getAttribute('type').toLowerCase();
        if (type == 'text') {
            console.log('text input');
        } else if (type == 'checkbox') {
            console.log('checkbox');
        }
    } else if (event.target.nodeName == "TEXTAREA") {
        console.log('text area');
    }
}
thing.onclick = clickFun;

您可以使用jQuery执行此操作，它为您提供了一些简单的函数来查看有关元素的信息。如果你想尝试一个javascript框架，由你决定。

$(':input').click(function(event){
    var $this = $(this);
    if ($this.is(':text')) {
        console.log('text input');
    } else if ($this.is(':checkbox')) {
        console.log('checkbox');
    } else if ($this.is(':textarea')) {
        console.log('textarea');
    }
});

要在文本框或区域中单击时获取光标的位置，请尝试查看此文章：

http://www.dedestruct.com/2008/03/22/howto-cross-browser-cursor-position-in-textareas/

Answer 2

对于＃1：使用jQuery“：input”选择器很方便：

if ($(node).is(":input"))
    alert("It's an input element!");

但一般来说，我认为没有一种简单的方法可以告诉XUL元素。枚举节点名称将是我能想到的最简单的解决方案。

使用JavaScript检查Firefox上的输入元素

2 个答案: