Question

在我的示例中，我有2个问题。

1。在第一次单击中，光标没有移到末尾。

2。在溢出中，我需要结束文本，因为有免费的内容输入。

$("a").click(function(evt) {
  evt.preventDefault();
  var textBox = document.querySelector(".c_textBox")
  textBox.innerText += " hello  a,";
  var len = textBox.innerText.length + 1

  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart(textBox.childNodes[0], len);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
  textBox.focus();
});

.c_textBox {
  display: block;
  width: 200px;
  height: 40px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 1.6rem;
  border: none;
  padding-right: 3rem;
  padding-left: 2rem;
  background-repeat: no-repeat;
  background-size: 2rem;
  /* background-position: 100% 50%;*/
  background-color: lightgrey;
  border: 2px black solid;
  padding: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">add item</a><br/>
<div contenteditable="true" type='text' id="searchInput" class="c_textBox"> </div>

http://jsfiddle.net/x3pf4nu2/

Answer 1

尝试将var table =[[]]用作空白。就是这样：

\u00a0

和CSS：

$("a").click(function(evt){
  evt.preventDefault();
  var textBox = document.querySelector(".c_textBox")
  textBox.innerText +="\u00a0hello\u00a0\u00a0a,";
  var len = textBox.innerText.length
  textBox.scrollLeft += textBox.innerText.length;
  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart(textBox.childNodes[0], len );
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
  textBox.focus();
});

将插入符号移至contenteditable元素的末尾，并在文本末尾加亮

1 个答案: