Search code examples
jqueryhtmlcssinputtext-align

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

I tried searching for a relevant question but I couldn't find one. I have a simple input field with a text-align: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 type in the input and the length of the text surpasses the input's length, then the overflow of the string starts disappearing on the left as you continue typing.

When I fill the same input with jQuery, the overflow of the text is on the right of the input. Is there a way to fill the input with text via jQuery and have it act as though you have typed the text and thus have the start of the string being hidden instead of the end?

To clarify what I want, let's see an example: When pressing the button to fill the input with text, it shows "Hello! What a wo", but if you write the text by yourself, the visible text is "nderful day today." and that's the result I want when I fill the input with jQuery.

jQuery btn result:

enter image description here

Desired result with jQuery btn:

enter image description here

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

UPDATE: RESOLVED

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

Solution

  • When pressing the button to fill the input with text, it shows "Hello! What a wo", but if you write the text by yourself, the visible text is "nderful day today."

    You can set cursor position at the end of input text at focus, then you can start writing from the end of added text, Try using this function to set cursor position, something like:

    Try fill the textbox by pressing the button Text with jQuery, then try writing by yourself.

    $('#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>

    I hope i got your idea or maybe this answer helps somewhat