Question

是否有可能阻止这种事情：我点击输入，向下滚动，当我输入滚动跳转到输入。我希望防止跳跃。

提前致谢。

Answer 1

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

但是你可以在你的inputelement中添加一个keydown eventlister，如果keyIdentifier以"U+" 开头（这样插入等就行了），这会阻止默认操作

然后从事件中创建一个字符串，如果没有按下shift键，则将keyCode值设为小写，然后将其插入Cursors位置。

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

其中一个解决方案可能是如果向下滚动，则从文本框中删除焦点，但用户无法输入。

键入时输入滚动

3 个答案: