如何添加輸入元素的原型？

Question

我有一個input元素：

<input type="text" id="t" value="abcdefghij" /> 

我想創建一個selectionStart

document.getElementById("t").selectionStart 

我需要的功能有：

function GetSelectionStart(o) { 
    if (o.createTextRange) { 
     var r = document.selection.createRange().duplicate() 
     r.moveEnd('character', o.value.length) 
     if (r.text == '') return o.value.length 
     return o.value.lastIndexOf(r.text) 
    } else return o.selectionStart; 
} 

function GetSelectionEnd(o) { 
    if (o.createTextRange) { 
     var r = document.selection.createRange().duplicate() 
     r.moveStart('character', -o.value.length) 
     return r.text.length 
    } else return o.selectionEnd; 
} 

我如何添加這個 「屬性」 來<input type="text" />在IE上？可能嗎？

Answer 1

首先，在原則上和實踐中嘗試擴展主機對象是一個壞主意。主機對象（如DOM元素）可以完成他們喜歡的任何操作;特別是，他們沒有義務支持你想要做的事情，並且在IE < = 8中，這是你使用這段代碼的目標，DOM元素根本不支持這個。您的選項要麼使用傳遞輸入元素的函數，要麼爲每個具有所需方法和屬性的輸入創建一個包裝器對象。

其次，你的GetSelectionStart()和GetSelectionEnd()功能是有缺陷的：它們不會在文本域正確處理新的生產線，並有大約lastIndexOf錯誤的邏輯（如果選擇的文本顯示比輸入一次？）。我在這方面做了很多工作，並且提出了我相當確信的是在所有主流瀏覽器中獲取輸入和textarea選擇的最佳功能，我前幾天在此發佈了這些內容： Is it possible to programmatically detect the caret position within a <input type=text> element?

Answer 2

你會希望延長HTMLInputElement接口，就像這樣：

HTMLInputElement.prototype.selectionStart = … 

然而，JavaScript的專家認爲這是一個bad practice。

Answer 3

這也回答了這些問題：

Caret position in textarea, in characters from the start

Character offset in an Internet Explorer TextRange