Входной прокрутки при вводе

Question

Можно ли предотвратить такую ​​вещь: Я нажимаю на вход, прокручиваю куда-то и когда я набираю scroll-jump для ввода. Я хочу предотвратить этот прыжок.

Заранее спасибо.

Answer 1

Одним из решений может быть удаление фокуса из текстового поля при прокрутке вниз, но затем пользователь не может ввести.

Answer 2

Я предлагаю не использовать это решение, так как вы можете столкнуться с множеством проблем совместимости, которые вы не можете решить.

Но вы можете добавить KeyDown eventlister к вашему inputelement, который предотвращает действие по умолчанию, если KeyIdentifier начинается с "U+"(этот способ вставки и т.д. будет работать)

Затем вы создаете строку из событий, Значение keyCode делает его строчным, если клавиша сдвига не была нажата, и вставьте его в позицию курсора.

inputElement.addEventListener ("keydown",function (e) {  

    var key = e.keyCode || e.which; 
    var element = e.srcElement || e.target; 
    var ident = 0 | parseInt (e.keyIdentifier.slice (-4) , 16) 
    var cursorPos = element.selectionStart || 0; 
    var selectionEnd = element.selectionEnd || 0; 

    if (key < 31 || key > 127 || ident !== key || e.ctrlKey || e.metaKey) { return true }; 

    if (key > 46 && key < 59 && e.shiftKey) { 
     key ^= 16; 
    } 

    if ("U+" === e.keyIdentifier.slice (0,2)) { //We only wan't to target text input values 
     e.preventDefault() ; //this prevents the default action and with it the scrolling 

     var characters = element.value.split (""); 
      characters.splice (cursorPos,selectionEnd - cursorPos, String.fromCharCode (key)["to" + (e.shiftKey?"Upper":"Lower") + "Case"]()); 

     element.value = characters.join (""); //append the string value to the input 

     cursorPos++; 

     if(element.createTextRange) { 
      var range = element.createTextRange(); 
      range.move('character', cursorPos); 
      range.select(); 
     } 
     else { 
      if(element.selectionStart) { 
       element.focus(); 
       element.setSelectionRange(cursorPos, cursorPos); 
      } 
      else { 
       element.focus(); 
      } 
     } 

    } 

}); 

Так что это обновленная версия.

Known issues: 

Shift + 0 -> `" "` 
Shift + 3 -> `"#"` 

May not work on IE. 

И может быть намного больше. Если есть подход ismpler, я бы использовал его, так как для разных раскладок клавиатуры может потребоваться много кода совместимости.

Но это что-то, чтобы начать с

Answer 3

Вы можете добавить KeyDown EventListener и использовать setTimeout для перехода в исходное положение после того, как immediateley скроллинг происходит.

inputElement.addEventListener ("keydown" , function() { 
    setTimeout (function() { 
     window.scroll (window.pageXOffset , window.pageYOffset)  
    },0) 
}); 

Только проверено на хромированном. Вы можете заметить мерцание, так что это не является оптимальным решением либо