如何关注textarea值的结尾？

Question

这是我的代码：

$('input').on('click', function(){
  $('textarea').focus();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>this is a test</textarea> <br />
<input type="button" value="focus" />

如何关注textarea值的结尾？

---

如您所见，当前单击按钮时，您将专注于文本区域，但位于其值的开头。我想做的就是把重点放在该textarea值的末尾。

Answer 1

您可以使用 setSelectionRange（start，end），参数是它要设置的选择的起点和终点。如果将两者都设置为值字符串的最后一个索引，则光标将位于末尾。

$('input').on('click', function(){
  let l=$("textarea").val().length

  $('textarea').focus()
  $('textarea')[0].setSelectionRange(l,l);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>this is a test</textarea> <br />
<input type="button" value="focus" />

Answer 2

您可以尝试以下方式：

$('input').on('click', function(){
  var preVal = $('#txtArea').val();
  $('#txtArea').val('');
  $('#txtArea').focus().val(preVal);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txtArea">this is a test</textarea> <br />
<input type="button" value="focus" />

Answer 3

一种解决方法如下：

1. 捕获上一个文本。
2. 重点。
3. 将' '附加到上一个值。

$('input').on('click', function(){
  var text = $('textarea').val();
  $('textarea').focus();
  $('textarea').val(text + ' ');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>this is a test</textarea> <br />
<input type="button" value="focus" />