代码之家  ›  专栏  ›  技术社区  ›  BrunoLM

如何为输入元素添加原型?

  •  7
  • BrunoLM  · 技术社区  · 14 年前

    我有一个输入元素:

    <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上?有可能吗?

    3 回复  |  直到 14 年前
        1
  •  4
  •   Community CDub    8 年前

    首先,尝试扩展宿主对象在原则上和实践中都是一个坏主意。宿主对象(如DOM元素)可以做它们喜欢做的事情;特别是,它们没有义务支持您正在尝试做的事情,在IE<=8中(这是您使用这段代码的目标),DOM元素根本不支持这一点。您可以选择使用传递输入元素的函数,或者为每个具有所需方法和属性的输入创建包装器对象。

    第二,你的 GetSelectionStart() GetSelectionEnd() 函数有缺陷:它们不能正确处理文本区域中的新行,并且周围有错误的逻辑 lastIndexOf (如果所选文本在输入中出现不止一次怎么办?)。我在这方面做了很多工作,并提出了一个我非常确信的最佳功能,可以在所有主要浏览器中获取输入和文本区域选择,这是我前几天在这里发布的: Is it possible to programmatically detect the caret position within a <input type=text> element?

        2
  •  4
  •   Marcel Korpel    14 年前

    你会想延长 HTMLInputElement 接口,如下所示:

    HTMLInputElement.prototype.selectionStart = …
    

    然而,JavaScript专家认为 bad practice .