设置内容可编辑元素的最大长度

Set max length for content editable element(设置内容可编辑元素的最大长度)

问题描述

我收到此代码

<div id="IIYBAGWNBC" contenteditable="true"></div>

和jQuery中的这个

$("#IIYBAGWNBC").text(function(index, currentText) {
  return currentText.substr(0, 100);
});

如何防止用户在contenteditablediv

中输入超过100个字符

推荐答案

很简单，在keydown上计算元素字符串的长度，防止用户尝试输入超过100个字符

$('div').on('keydown paste', function(event) { //Prevent on paste as well

  //Just for info, you can remove this line
  $('span').text('Total chars:' + $(this).text().length); 

  //You can add delete key event code as well over here for windows users.
  if($(this).text().length === 100 && event.keyCode != 8) { 
    event.preventDefault();
  }
});

Demo

解释：

在keydown或paste事件上，在contenteditablediv上，我们检查div的length是否达到100，以及用户是否没有单击退格键，以防止用户通过单击任意键或甚至右击粘贴来输入更多字符。

这篇关于设置内容可编辑元素的最大长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！