search

博客列表 >JavaScript:留言板添加字数实时统计与禁止超出功能,部分字符串和数组方法功能使用

JavaScript:留言板添加字数实时统计与禁止超出功能,部分字符串和数组方法功能使用

JiaJieChen
JiaJieChen原创
2021年04月10日 18:02:401086浏览

留言板添加字数实时统计与禁止超出功能,部分字符串和数组方法功能使用

1.字符串方法

方法 含义
concat() 字符串拼装
slice（） 取子串，可以正负数取数
trim() 删除字符串两边的空白字符
split（） 将字符打散成数组

①concat字符串拼装

②slice取子串

③trim删除空白字符

可以看到空格也算一个字符串，我们用trim方法删除/过滤掉空白字符串看看长度

可以看到trim过滤掉了空白字符串，只剩下两个实体字符串了

④split将字符打散成数组


可以看到用split 传入了@ 把字符串隔开成了两个数组

2.数组方法

方法 含义
push() 尾部添加，入栈
pop() 尾部删除，出栈
unsift（） 在数组头部添加
shift（） 在数组头部删除
join() 将数组转为字符串
filter（） 对每个成员应用回调函数进行处理返回true的成员
reduce（） 归纳操作，将多个成员进行统计后单值返回

①push尾部添加，入栈

②pop尾部删除，出栈

3.留言板添加数字实时统计与禁止超出功能


留言板添加数字实时统计用的是oninput方法只要值发生变化时连续触发,不等失去焦点，限制长度用的是maxlength属性限制到100.

css代码块

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   background: lightseagreen;
  9. }
  11. /* from 表单请留言 */
  12. .comment {
  13.   margin: 40px auto;
  14.   display: grid;
  15.   grid-template-columns: 1fr;
  16.   grid-template-rows: 40px 1fr;
  17.   place-items: center;
  18.   gap: 5px;
  19. }
  20. .comment > label {
  21.   color: white;
  22.   font-size: 20px;
  23. }
  25. /*--------------------------*/
  27. /*留言文本框*/
  28. .comment > #content {
  29.   width: 40em;
  30.   border-radius: 0.5em;
  31. }
  32. #content:hover {
  33.   box-shadow: lightcyan 0 0 1em;
  34.   transition: 0.6s;
  35. }
  36. /*----------------------------*/
  38. /* 提交按钮样式*/
  39. .comment > .submit {
  40.   width: 10rem;
  41.   height: 2rem;
  42.   background: lightcyan;
  43.   border: none;
  44.   cursor: pointer;
  45. }
  47. .comment > .submit:hover {
  48.   box-shadow: 0 0 1em;
  49. }
  50. /* ---------------------------- */
  52. /*留言框样式*/
  53. .list {
  54.   width: 40em;
  55.   height: 30em;
  56.   margin: 0px auto;
  57.   background: white;
  58.   font-style: normal;
  59.   border-radius: 1em;
  60. }
  62. .list:hover {
  63.   box-shadow: lightcyan 0 0 1em;
  64.   transition: 0.6s;
  65. }
  66. .list > ul {
  67.   padding: 1rem;
  68.   background: none;
  69.   box-shadow: none;
  70. }
  71. .list > ul:hover {
  72.   box-shadow: none;
  73. }
  75. /* 提示*/
  76. .tishi {
  77.   color: white;
  78.   margin-top: 5px;
  79. }

html代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>留言板</title>
  8.     <style>
  9.       @import url(comment.css);
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <form action="" class="comment">
  14.       <label for="content">请留言:</label>
  15.       <textarea
  16.         name="content"
  17.         id="content"
  18.         cols="30"
  19.         rows="10"
  20.         maxlength="100"
  21.         placeholder="请留言不要超过100个字"
  22.       ></textarea>
  23.       <div class="tishi"></div>
  24.       <span class="tishi"></span>
  25.       <button class="submit" type="button" name="submit">提交</button>
  26.     </form>
  27.     <fieldset class="list">
  28.       <legend style="font-weight: bolder; font-size: 1.3em">留言框</legend>
  29.       <ul class="listm"></ul>
  31.       <script>
  32.         //留言板功能实现绑定在留言框
  33.         //第一步拿到html里面的表单元素
  34.         //拿到form表单
  35.         const comment = document.querySelector(".comment");
  36.         //拿到文本输入框
  37.         const content = comment.content;
  38.         //拿到提交按钮
  39.         const submitBtn = comment.submit;
  40.         //拿到列表项
  41.         const Slistm = document.querySelector(".listm");
  42.         //拿到提示项
  43.         const tishi = document.querySelector(".tishi");
  45.         //文本提示事件
  46.         content.oninput = function () {
  47.           if (content.value.length > 0 && content.value.length <= 100) {
  48.             tishi.innerHTML = `您还可以输入${
  49.               100 - this.value.trim().length
  50.             }个字符`;
  52.             tishi.style.maxlength = "100";
  53.           } else {
  54.             content.oninput = function () {
  55.               tishi.innerHTML = `您还可以输入${
  56.                 100 - this.value.trim().length
  57.               }个字符`;
  58.             };
  59.           }
  60.         };
  62.         //提交按钮事件触发绑定
  63.         submitBtn.onclick = (ev) => {
  64.           // trim()发方法是过滤空格
  65.           //创建一个value变量，并且这个变量拿到输入文本框里的文字和过滤空格
  66.           let value = content.value.trim();
  68.           //做一个判断，判断文本款里的内容是否 > 0 或 <=100 个文字
  69.           if (value.length > 0 && value.length <= 100) {
  70.             //如果正确就镶嵌到列表中
  71.             //首先创建li列表，然后拿到value的文字
  72.             const newComment = document.createElement("li");
  73.             //添加li的样式
  74.             newComment.style.listStyle = "none";
  75.             newComment.style.borderBottom = "1px solid ";
  76.             newComment.style.height = "2em";
  77.             newComment.style.margin = "5px";
  78.             newComment.textContent = value;
  80.             //添加删除按钮功能
  81.             const deletBtn = document.createElement("button");
  82.             deletBtn.textContent = "删除";
  83.             deletBtn.style.width = "3rem";
  84.             deletBtn.style.height = "1.2rem";
  85.             deletBtn.style.cursor = "pointer";
  86.             deletBtn.style.background = "cyan";
  87.             deletBtn.style.border = "none";
  88.             deletBtn.style.float = "right";
  90.             //添加删除按钮事件
  91.             deletBtn.onclick = function () {
  92.               // confirm（） 是个询问弹窗，里面有确定和取消
  93.               if (confirm("是否删除")) {
  94.                 //确定是 true 取消是false
  95.                 //当前删除按钮的父节点是li，所以删除父节点就可以删除留言了
  96.                 this.parentNode.remove();
  97.                 //删除要通知客户
  98.                 alert("删除成功");
  99.                 //设置焦点
  100.                 content.focus();
  101.                 return false;
  102.               }
  103.             };
  105.             //将删除功能添加到新留言后面
  106.             newComment.append(deletBtn);
  108.             //将新留言添加到留言框中
  109.             Slistm.prepend(newComment);
  110.             content.value = null;
  111.             //并且通知客户添加成功
  112.             alert("提交成功");
  113.             //设置焦点
  114.             content.focus();
  115.           } else {
  116.             //如果不正确就弹出窗口
  117.             alert("没有内容或内容超出规定长度");
  118.             //设置焦点
  119.             content.focus();
  120.             //跳出判断
  121.             return false;
  122.           }
  123.         };
  124.       </script>
  125.     </fieldset>
  126.   </body>
  127. </html>
上一条：微信小程序或公众号以及特殊表情，昵称等存入MySQL报错问题下一条：【JavaScript案例】视口高度，元素位置、滚动高度等位置属性详解及图片懒加载、轮播图案例实战（附源代码）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多