打字時輸入滾動

Question

是否可以防止這種事情： 我點擊輸入，向下滾動某處，當我鍵入滾動跳轉輸入。 我想阻止這種跳躍。

在此先感謝。

Answer 1

其中一個解決方案可能是從文本框中移除焦點，如果向下滾動，但用戶無法輸入。

Answer 2

我建議不要使用這個解決方案，因爲你可能遇到很多兼容性問題，你不想解決。

但是你可以添加的keydown eventlister您inputelement，防止默認操作，如果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. 

而且可能還有更多。如果有一個ismpler方法，我會使用它，因爲這可能需要針對不同鍵盤佈局的許多兼容性代碼。

但它的東西與

Answer 3

開始你可以添加的keydown事件監聽和使用setTimeout滾動發生後滾動到原來的位置immediateley。

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

只在鉻上進行測試。您可能會注意到閃爍，所以這不是一個最佳的解決辦法