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

原学程将引见树立实质可编纂元素的最年夜长度的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

设置内容可编辑元素的最大长度 教程 第1张

成绩描写

我支到此代码

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

以及jQuery中的这个

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

怎样避免用户在contenteditablediv

中输出跨越一00个字符

推举谜底

很简略,在keydown上盘算元素字符串的长度,避免用户测验考试输出跨越一00个字符

$('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 === 一00 && event.keyCode != 8) { 
 event.preventDefault();
  }
});

Demo

说明:

keydown或者paste事宜上,在contenteditablediv上,我们检讨divlength能否到达一00,和用户能否出有单打退格键,以避免用户经由过程单打随意率性键或者乃至右打粘贴去输出更多字符。

佳了闭于树立实质可编纂元素的最年夜长度的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。