Question

http://jsfiddle.net/ianhk/t9Hj6/

<div style="width:250px; height: 100px; border: black solid 1px; overflow:auto">
  <table style="height:200px; border: red solid 1px">
    <tr>
      <td>abcdefghi</td>
      <td>
        <input id="text" value="Some text">
      </td>
      <td>abcdefghi</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </table>
 </div>

$("#text").on("keydown", function (ev) {
   ev.stopPropagation();
});

In the fiddle above I have a div with overflow set to auto, containing an oversized table with an input form element in one of the cells.

With safari and chrome using left/right cursor keys causes the div to scroll left/right when the left-most/right-most position is reached. I want to avoid the div scroll.

Things I’ve tried:

• keydown/preventDefault – prevents the cursor keys working (obviously)
• keydown/stopPropagation – no change, was expecting this to stop the event bubbling to the div
• wrapping the input in a form and trying to stopPropagation on that
• disable scrolling on the div whilst editing – this gets complex when IE/FF hide/show scrollbars and contents move around

Answer 1

It’s a bit of a rig but you could detect the position of the caret in relation to the text length using for instance this: https://stackoverflow.com/a/2897510 then you could simply return false if at the end (or start) of text and attempting to move.