Comment empêcher mon curseur/curseur de se déplacer à l'intérieur d'un élément de texte en entrée?

Question

J'essaie de créer un formulaire qui fonctionne de manière similaire à la page de recherche Google, ainsi que Gmail et plusieurs autres pages (y compris cette page - voir l'entrée «Tags» sur la page Poser une question). Lorsque le texte est entré, une liste d'options apparaît et l'utilisateur peut utiliser les flèches haut et bas pour sélectionner l'option désirée. Le problème que j'ai est que la flèche vers le haut met le curseur/caret en position 0 du champ, et vers le bas le met à la fin. Y a-t-il un moyen facile de l'empêcher de se déplacer vers le début/la fin, ou ai-je besoin de trouver la position du curseur avant que ma fonction soit exécutée, et de la repositionner à cet endroit après?

Ceci est le début de la fonction qui s'exécute lorsque le texte est entré dans l'élément d'entrée (onkeyup). Faites-moi savoir si plus de code serait utile.

var keycode = checkKeycode (event); // returns the keycode of the key pressed. 
if (keycode == 38) {   // up arrow 
    var selection = $(".optionsSelected").attr("id"); 
    var selId = parseInt(selection.replace('briefOption', '')); 
    if (selId != 0) { 
     $(".optionsSelected").removeClass("optionsSelected"); 
     var newSelId = selId - 1; 
     $("#briefOption"+newSelId).addClass("optionsSelected"); 
    } 
} 
else if (keycode == 40) {  // down arrow 
    var selection = $(".optionsSelected").attr("id"); 
    var selId = parseInt(selection.replace('briefOption', '')); 
    if (selId != numAvEmps && numAvEmps != 0) { 
     $(".optionsSelected").removeClass("optionsSelected"); 
     var newSelId = selId + 1; 
     $("#briefOption"+newSelId).addClass("optionsSelected"); 
    } 
} 
else if (keycode == 27) { // Escape 
    $("#docDropDown").css("display","none"); 
} 
else if (keycode == 9 || keycode == 13) {  //tab or enter 
    /* Fill form */ 
} 

Merci pour l'aide.

Answer 1

Vous voudriez mémoriser le signe d'insertion avant, puis lorsque vous avez terminé, réglez-le.

Quelque chose comme ceci:

corps HTML:

<input type="text" id="mytextbox" style="border: 1px solid black" /> 

Javascript:

function getCaretPosition(ctrl) 
{ 
    var caretPos = 0;  
    // IE 
    if (document.selection) 
    { 
     ctrl.focus(); 
     var sel = document.selection.createRange(); 
     sel.moveStart ('character', -ctrl.value.length); 
     caretPos = sel.text.length; 
    } 
    // Firefox 
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') 
    { 
     caretPos = ctrl.selectionStart; 
    } 

    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(); 
    } 
} 



$(document).ready(function() 
{ 

    $("#mytextbox").keydown(function (e) 
    { 
     // Up 
     if(e.which == 38) 
     { 
      var pos = getCaretPosition(this); 

      // Do stuff here that changes the value/caret? 

      setCaretPosition(this, pos); 
     } 
     // Down 
     else if(e.which == 40) 
     { 
      var pos = getCaretPosition(this); 

      // Do stuff here that changes the value/caret? 

      setCaretPosition(this, pos); 
     } 

    }); 

}); 

Answer 2

simplement empêcher l'action par défaut de l'événement. Vous pouvez le faire en retournant false si vous utilisez une propriété de gestionnaire d'événements plutôt que addEventListener/attachEvent, ce qui serait la meilleure façon:

var input = document.getElementById("your_input"); 
var suppressKeypress = false; 

input.onkeydown = function(evt) { 
    evt = evt || window.event; 
    var keyCode = evt.keyCode; 
    if (keyCode == 38) { 
     // Do your stuff here 
     suppressKeypress = true; // For Opera; see below 
     return false; 
    } 
    // Other cases here 
}; 

// This bit is for Opera, which only allows you to suppress the default 
// action of a keypress in the keypress event (not keydown) 
input.onkeypress = function() { 
    if (suppressKeypress) { 
     suppressKeypress = false; 
     return false; 
    } 
};