Input - text-align: right - fill input with jQuery

Question

I tried to find the corresponding question, but could not find it. I have a simple input field with text alignment: on the right.

<input id="screen" type="text">

#screen {
    width: 100%;
    font-size: 2em;
    padding: 0 0.5em 0 0.5em;
    border: solid 1px;
    text-align: right;
}

When I enter the input, and the text is longer than the input, the line overflow begins to disappear on the left as you continue to enter text.

When I fill the same input with jQuery, the text overflow is to the right of the input. Is there a way to fill the input with text through jQuery and make it act as if you typed the text and so that the beginning of the line was hidden and not the end?

To clarify what I want, let's look at an example: When you press a button to fill in an input with text, it displays “Hello! What a wo”, but if you write the text yourself, the visible text will be “this afternoon”. and what result do I want when I populate input using jQuery.

JQuery btn result:

Desired result with jQuery btn:

https://jsfiddle.net/fgdgbbjf/6/

---

UPDATE: RESOLVED

example: https://jsfiddle.net/fgdgbbjf/12/

Answer 1

, , "! wo" , , "."

, . , :

, "" jQuery, .

$('#clear').on('click', function() {
  $("#screen").val("");
});

$('#fill').on('click', function() {
  $('#screen').val("Hello! What a wonderful day today.");
});

$('#screen').focus(function() {
  setTimeout((function(el) {
    var strLength = el.value.length;
    return function() {
    if(el.setSelectionRange !== undefined) {
      el.setSelectionRange(strLength, strLength);
    } else {
      $(el).val(el.value);
    }
  }}(this)), 0);
});

.container {
  width: 30%;
}

#screen {
  width: 100%;
  font-size: 2em;
  padding: 0 0.5em 0 0.5em;
  border: solid 1px #ccc;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input id="screen" type="text">
</div>

<button id="clear">Clear Text</button>
<button id="fill">Text with jQuery</button>

Hide result

, , ,

Answer 2

.. , .focus()

$('#clear').on('click', function() {
  $("#screen").val("");
});
$('#fill').on('click', function() {
  $('#screen').val("Hello! What a wonderful day today.").focus();
});