博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
获取文本区域(textarea)行数【换行获取输入用户名个数】
阅读量:6329 次
发布时间:2019-06-22

本文共 1097 字,大约阅读时间需要 3 分钟。

需求:输入会员名,一行一个,最多可输入1000个

效果:

html代码:

 <div class="control-group">

                    <label class="control-label"><span style="color: red;">*&nbsp;</span>发送给指定会员</label>
                      <div class="controls">
                        <textarea class="span3" name="coupon_desc" style="height:100px;" required="required" id="area"></textarea>
                         <span class="help-inline">您已输入<span style="color:#F00;" id="areaRows">0</span>个会员名<br />(输入会员名,一行一个,最多可输入1000个)<br /><span style="color:#F00; display:none;" id="errorText">亲,最多可输入1000个</span></span>
</div>

js代码:

<script language="javascript">

               //获取回车事件

                      $('#area').keypress(function(event){
                      var keycode = (event.keyCode ? event.keyCode : event.which);
                         var areaRows = $("#area").val().split("\n").length; //获取行数
                           if(keycode != '' && areaRows<=1001){ //小于一千行
                            $('#areaRows').html(areaRows);//替换默认数量0
                       }
                        else{
                            $('#errorText').show();//显示错误提示信息
                            return false;
                            }
                    });

               //鼠标离开事件

                    $('#area').blur(function(){
                         var areaRows = $("#area").val().split("\n").length;
                      $('#areaRows').html(areaRows);
                      if($("#area").val() == 0){//如果为空时
                      $('#areaRows').html(0);//恢复初始值
                          }
                        });
</script>

实现效果:

转载于:https://www.cnblogs.com/gaofengming/p/4950497.html

你可能感兴趣的文章
top命令
查看>>
我的友情链接
查看>>
javascript的作用域
查看>>
新形势下初创B2B行业网站如何经营
查看>>
初心大陆-----python宝典 第五章之列表
查看>>
java基础学习2
查看>>
sysbench使用笔记
查看>>
有关电子商务信息的介绍
查看>>
NFC·(近距离无线通讯技术)
查看>>
nginx 禁止某个IP访问立网站的设置方法
查看>>
多线程基础(三)NSThread基础
查看>>
PHP的学习--Traits新特性
查看>>
ubuntu下,py2,py3共存,/usr/bin/python: No module named virtualenvwrapper错误解决方法
查看>>
Ext.form.field.Number numberfield
查看>>
异地多活数据中心项目
查看>>
Linux文件夹分析
查看>>
解决部分月份绩效无法显示的问题:timestamp\union al\autocommit等的用法
查看>>
CRT + lrzsz 进行远程linux系统服务器文件上传下载
查看>>
nginx 域名跳转 Nginx跳转自动到带www域名规则配置、nginx多域名向主域名跳转
查看>>
man openstack >>1.txt
查看>>