javascript - 输入时滚动输入

Question

是否有可能阻止这种事情：我点击输入，向下滚动某处，当我输入滚动跳转到输入。我想阻止那个跳跃。

提前致谢。

Answer 1

我建议不要使用此解决方案，因为您可能会遇到很多兼容性问题，您不想解决。

但是您可以将 keydown eventlister 添加到您的 inputelement 中，如果 keyIdentifier 以开头，则可以防止默认操作"U+" （这样插入等将起作用）

然后从事件中创建一个字符串，如果未按下 shift 键，则 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.

而且可能还有更多。如果有更简单的方法，我会使用它，因为这可能需要大量用于不同键盘布局的兼容性代码。

但这是开始

Answer 2

您可以添加一个 keydown eventListener 并setTimeout在滚动发生后立即滚动到原始位置。

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

仅在 chrome 上测试。您可能会注意到闪烁，因此这也不是最佳解决方案

Answer 3

一种解决方案可能是在向下滚动时从文本框中移除焦点，但随后用户无法键入。