自动显示文本输入剩余字数,并限制文本输入字数

本文介绍了一个简单的JavaScript实现的文本区域字符计数器。当用户在文本区域内输入时,该计数器会实时更新剩余可输入的字符数量,并防止超出设定的最大限制。通过在<HEAD>和</HEAD>之间插入特定的JavaScript代码,可以轻松地将此功能添加到网页中。

复制以下代码到<HEAD>和</HEAD>之间

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
countfield.value = maxlimit - field.value.length;
}
</script>

</HEAD>

以下复制到<form>和</form>之间

<center>
<font size="1" face="arial, helvetica, sans-serif"> ( You may enter up to 125 characters. )<br>
<textarea name=message wrap=physical cols=28 rows=4 onKeyDown="textCounter(this.form.message,this.form.remLen,125);" onKeyUp="textCounter(this.form.message,this.form.remLen,125);"></textarea>
<br>
<input readonly type=text name=remLen size=3 maxlength=3 value="125"> characters left</font>
</center>

代码实例:http://javascript.internet.com/forms/limit-textarea.html

在asp.net里后台代码里获取文本框输入的内容使用Request.Form("message")就可以

你可以使用 tinymce 的插件 Word Count 来限制最大输入字数显示剩余输入字数。这个插件会自动计算输入的字符数,在编辑器底部显示出来。 首先,在页面中引入 Word Count 插件的 js 文件和 css 文件: ``` html <script src="https://cdn.tiny.cloud/1/YOUR_API_KEY/tinymce/5/plugins/wordcount/plugin.min.js"></script> <link href="https://cdn.tiny.cloud/1/YOUR_API_KEY/tinymce/5/plugins/wordcount/plugin.min.css" rel="stylesheet"> ``` 然后,在初始化 tinymce 编辑器时,将 wordcount 插件添加到 plugins 参数中,在 toolbar 参数中添加 wordcount 字段,这样就会在编辑器底部显示字数统计: ``` javascript tinymce.init({ selector: '#myTextarea', plugins: 'wordcount', //添加 wordcount 插件 toolbar: 'wordcount', //在工具栏中添加 wordcount 字段 max_chars: 100, //设置最大字符数为 100 setup: function (editor) { //添加 change 事件监听器 editor.on('change', function () { var content = editor.getContent({ format: 'text' }); //获取编辑器内容 var chars_left = editor.getParam('max_chars') - content.length; //计算剩余字符数 var statusbar = editor.theme.panel.find('#charcount'); //找到状态栏 statusbar.text(chars_left + ' characters left'); //更新状态栏 }); } }); ``` 在上面的代码中,我们添加了一个 change 事件监听器,在编辑器内容改变时更新状态栏。在监听器中,我们首先获取编辑器的内容,然后计算剩余字符数,最后更新状态栏的文本。 注意,上面的代码中使用了 editor.getParam('max_chars') 获取最大字符数,这个值是在初始化编辑器时设置的。你可以根据自己的需要设置不同的最大字符数。 最后,你需要在编辑器下方添加一个元素来显示状态栏: ``` html <div id="myStatusbar">0 characters left</div> ``` 然后,在初始化 tinymce 编辑器时,将这个元素的 id 添加到 statusbar 参数中: ``` javascript tinymce.init({ selector: '#myTextarea', plugins: 'wordcount', toolbar: 'wordcount', max_chars: 100, statusbar: '#myStatusbar' //添加状态栏元素的 id }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值