Question

我有一个带有contenteditable属性的div，我希望如此剪切输入的内容，并且比例如5个字符。但重点是始终开始输入......

＆＃13;

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;
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

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

Answer 1

我的解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

thx to @cmbuckley。带我进入新思维：D

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

Answer 2

你应该能够移动插入符，有一个问题：

Set keyboard caret position in html textbox

将焦点设置为div中字符串的结尾

2 个答案: