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

Question

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:

Desired result with jQuery btn:

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

UPDATE: RESOLVED

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

score 4 · Answer 1 · answered May 17 '16 at 01:55

4

If I got your point .. I think you just need to .focus()

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

Demo Here

answered May 17 '16 at 01:55

Mohamed-Yousef

22,772
3
17
27

It didn't work. Sorry, I didn't explain it well enough. For e.g. 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 it with jQuery. – Konstantinos Vytiniotis May 17 '16 at 02:03

Shady Alset · Accepted Answer · 2016-05-17T17:35:33.027

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

Thank you very much! It worked. I just needed to `.focus()` to `$('#screen').val("Hello! What a wonderful day today.")` to trigger your focus function and have the desired result! :) — Konstantinos Vytiniotis, May 17 '16 at 18:01

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

UPDATE: RESOLVED

2 Answers2