Definir a posição do cursor do teclado na checkbox de texto html

Alguém sabe como mover o cursor do teclado em uma checkbox de texto para uma posição específica?

Por exemplo, se uma checkbox de texto (por exemplo, elemento de input, não área de texto) tiver 50 caracteres e eu quiser posicionar o sinal de interpolação antes do caractere 20, como eu faria isso?

Isso está em diferenciação desta questão: jQuery Defina a Posição do Cursor na Área de Texto , que requer jQuery.

Extraído da posição do cursor do teclado de Josh Stodola em uma checkbox de texto ou TextArea com Javascript

Uma function genérica que permitirá inserir o cursor em qualquer posição de uma checkbox de texto ou área de texto que você deseja:

function setCaretPosition(elemId, caretPos) { var elem = document.getElementById(elemId); if(elem != null) { if(elem.createTextRange) { var range = elem.createTextRange(); range.move('character', caretPos); range.select(); } else { if(elem.selectionStart) { elem.focus(); elem.setSelectionRange(caretPos, caretPos); } else elem.focus(); } } } 

O primeiro parâmetro esperado é o ID do elemento no qual você deseja inserir o cursor do teclado. Se o elemento não puder ser encontrado, nada acontecerá (obviamente). O segundo parâmetro é o índice de posição do cursor. Zero colocará o cursor do teclado no início. Se você passar um número maior que o número de caracteres no valor dos elementos, ele colocará o cursor do teclado no final.

Testado no IE6 e superior, Firefox 2, Opera 8, Netscape 9, SeaMonkey e Safari. Infelizmente no Safari, não funciona em combinação com o evento onfocus).

Um exemplo de uso da function acima para forçar o cursor do teclado a ir para o final de todas as áreas de texto na página quando eles recebem foco:

 function addLoadEvent(func) { if(typeof window.onload != 'function') { window.onload = func; } else { if(func) { var oldLoad = window.onload; window.onload = function() { if(oldLoad) oldLoad(); func(); } } } } // The setCaretPosition function belongs right here! function setTextAreasOnFocus() { /*** * This function will force the keyboard caret to be positioned * at the end of all textareas when they receive focus. */ var textAreas = document.getElementsByTagName('textarea'); for(var i = 0; i < textAreas.length; i++) { textAreas[i].onfocus = function() { setCaretPosition(this.id, this.value.length); } } textAreas = null; } addLoadEvent(setTextAreasOnFocus); 

O link na resposta está quebrado, este deve funcionar (todos os créditos vão para blog.vishalon.net ):

http://snipplr.com/view/5144/getset-cursor-in-html-textarea/

Caso o código seja perdido novamente, aqui estão as duas principais funções:

 function doGetCaretPosition(ctrl) { var CaretPos = 0; if (ctrl.selectionStart || ctrl.selectionStart == 0) {// Standard. CaretPos = ctrl.selectionStart; } else if (document.selection) {// Legacy IE ctrl.focus (); var Sel = document.selection.createRange (); Sel.moveStart ('character', -ctrl.value.length); CaretPos = Sel.text.length; } return (CaretPos); } function setCaretPosition(ctrl,pos) { if (ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos,pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } 

Como realmente precisei dessa solução, e a solução de linha de base típica ( focar a input – depois definir o valor igual a ela mesma ) não funciona em vários navegadores , passei algum tempo ajustando e editando tudo para que funcionasse. Baseando-se no código do @ kd7 , aqui está o que eu fiz.

Apreciar! Funciona no IE6 +, Firefox, Chrome, Safari, Opera

Técnica de posicionamento de posicionamento cruzado entre navegadores (exemplo: movendo o cursor para END)

 // ** USEAGE ** (returns a boolean true/false if it worked or not) // Parameters ( Id_of_element, caretPosition_you_want) setCaretPosition('IDHERE', 10); // example 

A carne e batatas são basicamente setCaretPosition de @ kd7 , com o maior tweak sendo if (el.selectionStart || el.selectionStart === 0) , no firefox o selectionStart está iniciando em 0 , que em boolean claro está se voltando para Falsa, então estava quebrando ali.

No chrome, o maior problema era que apenas dar-lhe .focus() não era suficiente (ele continuava selecionando TODO o texto!) Assim, definimos o valor de si mesmo, para ele mesmo el.value = el.value; antes de chamar nossa function, e agora ela tem um aperto e posição com a input para usar selectionStart .

 function setCaretPosition(elemId, caretPos) { var el = document.getElementById(elemId); el.value = el.value; // ^ this is used to not only get "focus", but // to make sure we don't have it everything -selected- // (it causes an issue in chrome, and having it doesn't hurt any other browser) if (el !== null) { if (el.createTextRange) { var range = el.createTextRange(); range.move('character', caretPos); range.select(); return true; } else { // (el.selectionStart === 0 added for Firefox bug) if (el.selectionStart || el.selectionStart === 0) { el.focus(); el.setSelectionRange(caretPos, caretPos); return true; } else { // fail city, fortunately this never happens (as far as I've tested) :) el.focus(); return false; } } } } 

Eu ajustei um pouco a resposta do kd7, porque elem.selectionStart será avaliado como false quando o selectionStart for incidentalmente 0.

 function setCaretPosition(elem, caretPos) { var range; if (elem.createTextRange) { range = elem.createTextRange(); range.move('character', caretPos); range.select(); } else { elem.focus(); if (elem.selectionStart !== undefined) { elem.setSelectionRange(caretPos, caretPos); } } } 
 < !DOCTYPE html>   set caret position     

 

 function SetCaretEnd(tID) { tID += ""; if (!tID.startsWith("#")) { tID = "#" + tID; } $(tID).focus(); var t = $(tID).val(); if (t.length == 0) { return; } $(tID).val(""); $(tID).val(t); $(tID).scrollTop($(tID)[0].scrollHeight); } 

Se você precisa focar alguma checkbox de texto e seu único problema é que todo o texto fica destacado enquanto você quer que o cursor esteja no fim, nesse caso específico, você pode usar esse truque de definir o valor da checkbox de texto após foco:

 $("#myinputfield").focus().val($("#myinputfield").val()); 

Eu iria corrigir as condições como abaixo:

 function setCaretPosition(elemId, caretPos) { var elem = document.getElementById(elemId); if (elem) { if (typeof elem.createTextRange != 'undefined') { var range = elem.createTextRange(); range.move('character', caretPos); range.select(); } else { if (typeof elem.selectionStart != 'undefined') elem.selectionStart = caretPos; elem.focus(); } } }