設置插入符結束文本框的焦點

當某個文本框接收焦點，設置插入符文本框的末尾。該解決方案需要與IE7，Opera，Chrome和Firefox兼容。
爲了使事情更容易一些，只有當文本框的當前值爲固定值時才需要此行爲。（說「INIT」）

未完成的解決方案：

人們會想到這是很簡單，但我無法找到，這樣在瀏覽器上運行的答案。以下的答案做不工作：

$("#test").focus(function() { 
    // This works for Opera only 
    // Also tested with $(this).val($(this).val()); 
    if (this.value == "INIT") { 
    this.value = ""; 
    this.value = "INIT"; 
    } 
}); 

$("#test").focus(function() { 
    // This works for IE and for Opera 
    if (this.value == "INIT") { 
    setCaretPosition(this, 4); 
    } 
});

我從SO問題得到了setCaretPosition功能，看到它在不同的博客藏漢：

function setCaretPosition(ctrl, pos) { 
     if (ctrl.setSelectionRange) { 
      //ctrl.focus(); // can't focus since we call this from focus() 
      // IE only 
      ctrl.setSelectionRange(pos, pos); 
     } 
     else if (ctrl.createTextRange) { 
      // Chrome, FF and Opera 
      var range = ctrl.createTextRange(); 
      range.collapse(true); 
      range.moveEnd('character', pos); // Also tested with this 
      range.moveStart('character', pos); // and this line in comment 
      range.select(); 
     } 
}

小提琴

我設置一個jsFiddle。

來源

2012-10-25 Laoujin

你能更具體地說明它在哪裏以及如何不起作用嗎？ – jrajav

在FF和Chrome中，所有文本都被選中。 – Laoujin

試試這個：

$("input").on("focus", function() { 
    if (this.value === "INIT") { 
     var input = this; 
     setTimeout(function() { 
      if (input.createTextRange) { 
       var r = input.createTextRange(); 
       r.collapse(true); 
       r.moveEnd("character", input.value.length); 
       r.moveStart("character", input.value.length); 
       r.select(); 
      } 
      else { 
       input.selectionStart = input.selectionEnd = input.value.length; 
      } 

     }, 13); 
    } 
});

http://jsfiddle.net/azBxU/4/

來源

2012-10-25 14:46:08 Esailija

爲什麼您將超時設置爲13ms？ – surjikal

@Nick所以它在鉻和火狐工作 – Esailija

太棒了！這適用於Opera，Chrome和Firefox。已經有了一些IE瀏覽器，所以我終於可以把它放在我身後。非常感謝:) – Laoujin

這應該工作：

$("#test").focus(function() { 
    var $this = $(this); 
    var value = $this.val(); 
    if (value === "INIT") { 
     setTimeout(function() { 
      $this.val(value); 
     }, 0); 
    } 
});

來源

2012-10-25 14:48:40 surjikal

這隻適用於Chrome。如果我只獲得FF的解決方案，我可以將這三種解決方案結合起來，讓它適用於所有瀏覽器:) – Laoujin

我發現了一個jQuery插件，一直爲我工作了很長時間。不記得在哪裏。

(function($) 
{ 
    jQuery.fn.putCursorAtEnd = function() { 
    return this.each(function() { 
     $(this).focus() 

     // If this function exists... 
     if (this.setSelectionRange) { 
      // ... then use it 
      // (Doesn't work in IE) 

      // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh. 
      var len = $(this).val().length * 2; 
      this.setSelectionRange(len, len); 
     } else { 
      // ... otherwise replace the contents with itself 
      // (Doesn't work in Google Chrome) 
      $(this).val($(this).val()); 
     } 

     // Scroll to the bottom, in case we're in a tall textarea 
     // (Necessary for Firefox and Google Chrome) 
     this.scrollTop = 999999; 
    }); 
    }; 
})(jQuery);

來源

2012-10-25 14:57:32

設置插入符結束文本框的焦點

回答

相關問題