http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 3454|回复: 1

[Jquery] jquery-textarea字数提示效果

[复制链接]
发表于 2021-6-29 14:30:31 | 显示全部楼层 |阅读模式
   平时做输入文本框的时候好多都是需要限制字数和显示输入字符的数量,今天咱们就来说下文本域的字数提示效果的实现方式。
    效果:
    企业微信截图_16249475382537.png
     HTML:
     
[HTML] 纯文本查看 复制代码
	<div class="content">
		<textarea class="textarea" placeholder="请输入内容"  maxlength="60" id="context"></textarea>
		<div class="input-num">
			<span id="tips">0</span>
			/60字
		</div>
	</div>

     css样式:
     
[CSS] 纯文本查看 复制代码
.content {
		    position: relative;
		    width:500px;
		    height:160px;
		}
		.content .textarea {
		    font-size: 14px;
		    color: #333;
		    padding: 12px 15px;
		    width: 100%;
		    height: 100%;
		    border: solid 1px #e7e7e7;
		    vertical-align: top;
		    resize: none;
		    box-sizing: border-box;
		}
		.content .input-num {
		    display: block;
		    position: absolute;
		    bottom: 6px;
		    right: 10px;
		    font-size: 12px;
		    color: #999;
		}
     js代码:
     
[JavaScript] 纯文本查看 复制代码
$(function () {
    var text = $('#context').val();
    var len = text.length;
    $('#tips').html(len);
    $('#context').keyup(function () {
        var text = $(this).val();
        len = text.length;
        if (len > 60) {
            return false;
        }
        $("#tips").html(len);
    })
})

   以上就是文本域的显示字数提示的效果实现代码,希望可以帮助到大家!


1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
发表于 2021-6-29 16:27:13 | 显示全部楼层
实用, 支持楼主
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-25 05:15

© 2014-2021

快速回复 返回顶部 返回列表