javascripthtmljquerycssselection-api

Input not scrolling to the far right like it should


I have an input field where i append data at the cursor position.

after that, i set the selectionStart to the end of the field.

BUT, whenever i add something to the input (by button clicks), i only see the left part of it (until it reaches the right edge). everything more is there (i can select it with the mouse and scroll), but it doesn't automatically show the right edge.

how can i do that? i want to add something to the input and jump right to the end of the string.

  // add 2 digit number
  $('button#2digit').on('click', function add2digit() {
    addNumberToInput(10, 99);
  });

  function addNumberToInput(min, max) {
    var problemInput = $('input#testProblem');
    if (lastCharIsOperation() || problemInput.val().trim() < 1) {  // if last char is an operation or first in string, just append the number
      addAtCursor(randomNonPrime(min, max));
    } else {
      addAtCursor('+' + randomNonPrime(min, max));
    }
  }



  function addAtCursor(toAdd) {
    var problemInput = $('input#testProblem');

    var oldText = problemInput.val();
    var cursor = problemInput[0].selectionStart;

    var pre = oldText.substring(0,cursor);
    var post = oldText.substring(cursor, oldText.length);

    //insert at cursor
    problemInput.val(pre + toAdd + post);

    //put cursor to end
    problemInput[0].selectionStart = problemInput.val().length;
  }

(it even skips back to the left on blur, i couldn't make a picture with the windows snipping tool, because i had to click it first)

np here

here it reaches the end

content persists over the edge, but doesn't autoscroll to there like it (should?)


Solution

  • From Set mouse focus and move cursor to end of input using jQuery.

    var problemInput = $('input#testProblem');
    problemInput.focus();
    var t=problemInput.val();
    problemInput.val('');
    problemInput.val(t);
    

    Here is the start of a full solution: https://jsfiddle.net/michaelgentry/vwm159pt/