输入 - 文本对齐:右键 - 用jQuery填充输入

时间:2016-05-17 01:48:22

标签: jquery html css input text-align

我尝试搜索相关问题但我无法找到。我有一个带有text-align:right的简单输入字段。

SELECT distict, 
       NAME 
FROM   yourtable 
       CROSS apply (VALUES ('Gold',gold), 
                           ('Silver',silver), 
                           ('Bronze',bronze)) cs (NAME, value) 
WHERE  value = 'Y' 

当我输入输入并且文本的长度超过输入的长度时,当你继续输入时,字符串的溢出开始消失在左边。

当我用jQuery填充相同的输入时,文本的溢出位于输入的右侧。有没有办法通过jQuery用文本填充输入,让它表现得好像你输入了文本,因此字符串的开头被隐藏而不是结束?

为了澄清我想要的东西,让我们看一个例子: 当按下按钮用文本填充输入时,它显示"您好!真是太棒了,但如果你自己写文字,可见的文字就是今天的日子。"当我用jQuery填充输入时,这就是我想要的结果。

jQuery btn结果:

enter image description here

jQuery btn所需的结果:

enter image description here

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

更新:已解决

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

2 个答案:

答案 0 :(得分:4)

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

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

<强> Demo Here

答案 1 :(得分:1)

  

按下按钮以使用文本填充输入时,显示&#34;您好!   什么是&#34; ,但如果你自己写文字,可见的文字是   今天&#34; nderful day。&#34;

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

尝试按下 Text with jQuery 按钮填充文本框,然后自己尝试编写。

&#13;
&#13;
$('#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);
});
&#13;
.container {
  width: 30%;
}

#screen {
  width: 100%;
  font-size: 2em;
  padding: 0 0.5em 0 0.5em;
  border: solid 1px #ccc;
  text-align: right;
}
&#13;
<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>
&#13;
&#13;
&#13;

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