JS动态呈现还可以输入字数

现在觉得当我们使用js或者jquery来呈现一个动态效果时，主要还是要想清楚它的思想、它的原理。而动态呈现输入字数，其实就是给它设置一个最大输入字数，然后获取已输入的字数，自然想做什么都可以。

<script>function  setShowLength(obj,maxlength,id){var remain= maxlength - obj.value.length;var oid = id;if(remain<0){ remain=0; }document.getElementById(oid).innerHTML = "还可以输入"+remain+"字数";}
</script><input type="text" name="title" size="50" maxlength="15" onkeyup="javascript:setShowLength(this,15,'content');" />
<span id="content">还可以输入15个字数</span>

这是个用原生js的，自然也是可以用jquery写出来。

<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script><script language="javascript" type="text/javascript">$(document).ready(function() {$(document).keyup(function() {var counter = $("#divform textarea").val().length; //获取文本域的字符串长度$("#gptu var").text(200 - counter);    //每次减去字符长度
            });});</script><div id="divform" align="center"><p id="gptu">你还可以输入<var style="color: #C00">--</var>个字符。</p><p><label><textarea name="" cols="" rows="" maxlength="200" style="height: 80px; width: 400px"></textarea></label></p></div>

　　　刨去几句css，原理都是一样的。

　　　在网上还可以看到相关的应用，就是类似微博的文字输入框

转载于:https://www.cnblogs.com/wanliyuan/p/3640676.html

JS动态呈现还可以输入字数相关推荐

JS 限制input框的输入字数，并提示可输入字数
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
实现文本框以及其背景（根据输入字数）动态拉伸
使用Vertical Layout Group/Horizontol Layout Group实现文本框(根据输入字数)动态拉伸(文本框背景跟随文本框变化同时拉伸) padding :用于在子布局元素 ...
文本框输入还剩多少字数统计代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
显示html标签的textarea字数,JavaScript中统计Textarea字数并提示还能输入的字符
现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体 ...
PHP检测字数,js判断文本框剩余可输入字数的方法
js判断文本框剩余可输入字数的方法昨天项目上面遇到一个问题,就是在文本框输入的过程中判断剩余可输入是文字数量,百度了一下,找到了一个比较好的解决方法:代码如下: maxLen = 140; //可以 ...
监听文本框输入开发仿新浪微博限制输入字数的textarea插件。
转载自品略图书馆:http://www.pinlue.com/article/2020/03/1202/1310013961724.html Firefox.Chrome.IE9,IE10 均支持 o ...
监听文本框输入开发仿新浪微博限制输入字数的textarea插件
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
实现textarea限制输入字数
2019独角兽企业重金招聘Python工程师标准>>> textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同, ...
C# 动态条件组合_3D模型+平滑，在PPT中实现动态呈现
营长说微软的Office365软件中有个3D模型功能,很多人没有用过或者没有找到合适的3D模型文件.今天营长给你介绍如何应用Office365中的在线3D模型资源,并用动画和切换功能动态展示呈现.这 ...
texearea 限制字数_实现textarea限制输入字数
实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框t ...

JS动态呈现还可以输入字数

JS动态呈现还可以输入字数相关推荐

最新文章

热门文章