分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了输入 – 文本对齐：右键 – 用jQuery填充输入，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_404_1@

我试着找一个相关的问题,但我找不到一个.我有一个带有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”,但是如果你自己写文字,那么可见文字就是“今天的蠢人”.当我用jQuery填充输入时,这就是我想要的结果.

jQuery btn结果：

jQuery btn的理想结果：

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

更新：已解决

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

解决方法

您可以在焦点处设置输入文本末尾的光标位置,然后您可以从添加文本的末尾开始编写,尝试使用此功能设置光标位置,例如：

尝试按下带有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>

我希望我有你的想法,或者这个答案可能有所帮助