使用JavaScript檢查Firefox上的輸入元素

Question

我正在開發一個擴展，它監聽元素上的單擊事件。

現在我有兩個問題：

1. 是否有檢測元件是輸入要素的便捷方式？像HTML中的input，textarea和XUL中的textbox一樣。
2. 如果用戶點擊一個輸入元素，如何獲取用戶點擊的位置？ 例如，有一個<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的「：輸入「選擇器像這樣：

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

但通常，我不認爲有一個簡單的方法來告訴XUL元素。枚舉節點名稱是我能想到的最簡單的解決方案。