javascript - 将焦点设置到 div 中的字符串末尾

Question

我有一个带有 contenteditable 属性的 div，我想剪切输入的内容并且比例如长5 个字符。但是焦点一直设置为输入的开始......

var maxlength = 5;
$(".test").attr("contenteditable", function(){
    $(this).on('keyup', function( e ){
        if( $(this).html().length > (maxlength)){
            var content = $(this).html();
                content = content.substring(0,(maxlength));
            $(this).html(content).focus();
        }
    });
    return true;
});

div{
    width: 100px;
    height: 20px;
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>

如何将光标设置到div内容的末尾？

我在 SO 中找到了一些示例，但它们都不适用于我的构造。

我之前尝试过 .focus() 和 .blur() 并清除了内容...没有结果...

我当然不想安装插件...

Answer 1

我的解决方案:

$('.test').attr('contenteditable', function() {
  $(this).on('keypress', function(e) {
    var len = $(this).attr('maxlength');
    if ($(this).html().length >= len) {
      e.preventDefault();
    }
  });
  return true;
});

div {
  background: red;
}
.small {
  width: 42px;
}
.medium {
  width: 82px;
}
.large {
  width: 122px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
MaxLength 5:
<div class="test small" maxlength="5"></div>
MaxLength 10:
<div class="test medium" maxlength="10"></div>
MaxLength 15:
<div class="test large" maxlength="15"></div>

感谢@cmbuckley。给我带来了新的思考:D

不需要焦点，因为焦点永远不会丢失，字符可以轻松删除。