输入 - text-align:right - 用 jQuery 填充输入

Question

我尝试搜索相关问题，但找不到。我有一个带有 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;
}

当我输入内容并且文本的长度超过输入的长度时，当您继续输入时，字符串的溢出部分开始在左侧消失。

当我用jQuery填充相同的输入时，文本溢出在输入的右侧。有没有一种方法可以通过 jQuery 用文本填充输入并让它表现得好像您已经键入了文本，从而隐藏字符串的开头而不是结尾？

为了说明我想要什么，让我们看一个例子：当按下按钮用文本填充输入时，它显示"Hello! What a wo"，但是如果你自己写文本，可见文本是"nderful day today."，这就是我用[填充输入时想要的结果=43=].

jQuery btn 结果：

jQuery btn 的预期结果：

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

更新：已解决

示例：https://jsfiddle.net/fgdgbbjf/12/

Answer 1

如果我明白你的意思..我想你只需要 .focus()

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

Demo Here

Answer 2

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."

你可以在焦点输入文本的末尾设置光标位置，然后你可以从添加文本的末尾开始书写，尝试使用此功能设置光标位置，类似于：

尝试通过按下按钮 文本 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>

我希望我能理解你的想法，或者这个答案可能会有所帮助

输入 - text-align:right - 用 jQuery 填充输入

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

html

css

jquery

text-align

input

更新：已解决