零基础学做网站培训介绍

当前位置:

怎么给表单textarea文本域添加行号

我们知道,textarea文本域是制作网站表单里文本框的标签,它可以书写大段文字来提交,常用于网站Form表单实现提交发送到邮箱。下面介绍一下怎么给表单文textarea文本域添加行号,并且当我们输入一行后,它自行显示一行行号。效果如下图:

表单textarea文本域添加行号

方法/步骤

第一步:引入JQUERY,实现动态行号需要JQUERY的支持,使用以下的代码引入JQUERY;


<span class="html-tag"><script <span class="html-attribute-name">src</span>="../js/jquery-1.12.0.min.js"></span><span class="html-tag"></script></span>

第二步:下载textarea文本域行号自动生成插件auto-line-number.js;并使用以下的代码引入到网页中;(下载链接: https://pan.baidu.com/s/1xw16ZSnjJKDFW8cs46drSg 提取码: s9tv)


<span class="html-tag"><script <span class="html-attribute-name">src</span>="../js/auto-line-number.js"></span><span class="html-tag"></script></span>

第三步:在textarea标签上添加一个ID标记,如:


<span class="html-tag"><textarea <span class="html-attribute-name">name</span>="<span class="html-attribute-value">postlr</span>" <span class="html-attribute-name">cols</span>="<span class="html-attribute-value">14%</span>" <span class="html-attribute-name">rows</span>="<span class="html-attribute-value">100</span>" <span class="html-attribute-name">placeholder</span>="<span class="html-attribute-value">每行一个标题,不用任何符号</span>" <span class="html-attribute-name">id</span>="<span class="html-attribute-value">text01</span>"></span><span class="html-tag"></textarea></span>

第四步:在网页底部添加以下的JS代码,这样就可以实现textarea文本域动态添加行号的效果了。


<script>
$("#text01").setTextareaCount({
width: "30px",
bgColor: "#ddd",
color: "#333",
display: "inline-block"
});
</script>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注