码迷,mamicode.com
首页 > Web开发 > 详细

JQuery实现前端增删上下移文字计数

时间:2020-03-18 11:22:50      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:function   length   jquer   获取   元素   div   append   src   截取   

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>前端增删上下移文字计数</title>
 6     </head>
 7     <body>
 8         <textarea id="textarea"></textarea>
 9 
10         <div id="ine">0/20</div>
11 
12         <button id="ok">添加</button>
13 
14         <ol id="box">
15             <li>前端增删上下移文字计数<button class="setup">上移</button><button class="setdown">下移</button><button class="setdel">删除</button></li>
16         </ol>
17 
18     </body>
19     <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
20     <script type="text/javascript" charset="utf-8">
21         /* 设置字数计量 */
22         var bind_name = input;
23         if (navigator.userAgent.indexOf("MSIE") != -1) { //(此处是为了兼容IE)
24             bind_name = propertychange;
25         }
26         if (navigator.userAgent.match(/android/i) == "android") {
27             bind_name = "keyup";
28         }
29 
30         /* 字数判定函数 */
31         $("#textarea").bind(bind_name, function() {
32             var limitSub = $(this).val().substr(0, 20);
33             $(this).val(limitSub); //截取字符长度
34             $(this).next(#ine).html(limitSub.length + /20); //获取实时输入字符长度并显示
35             if (limitSub.length == 20) {
36                 $(#ine).css(color, red); //超出指定字符长度标红提示
37                 alert(你已超出20个字!);
38             } else {
39                 $(#ine).css(color, #666);
40             }
41         });
42 
43         /* 点击添加函数 */
44         $(document).on("click", "#ok", function() {
45             var val = $("#textarea").val()
46             //alert(val);
47             var tem = "";
48 
49             tem += <li>;
50             tem += <span>;
51             tem += val;
52             tem += </span>;
53             tem += <button class="setup">;
54             tem += 上移;
55             tem += </button>;
56             tem += <button class="setdown">;
57             tem += 下移;
58             tem += </button>;
59             tem += <button class="setdel">;
60             tem += 删除;
61             tem += </button>;
62             tem += </li>;
63 
64             if (val = null || val == "") {
65                 alert("输入为空!!!");
66             } else {
67                 $("#box").append(tem);
68                 alert("添加成功!!!");
69             }
70             $("#textarea").val("");
71             $("#ine").html(0/200).css(color, #666);
72         });
73 
74         /* 上移 */
75         $(#box).on(click, .setup, function() {
76             var $oP = $(this).parents("li");
77             $oP.fadeOut().fadeIn();
78             // $oP.addClass("active").siblings().removeClass("active");
79             $oP.prev().before($oP); //prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素,通过选择器进行筛选是可选的。
80         }); //before() 方法在被选元素前插入指定的内容。  语法:$(selector).before(content)
81 
82         /* 下移 */
83         $(#box).on(click, .setdown, function() {
84             var $oP = $(this).parents("li");
85             $oP.fadeOut().fadeIn();
86             // $oP.addClass("active").siblings().removeClass("active");
87             $oP.next().after($oP); //after() 方法在被选元素后插入指定的内容。
88         })
89 
90         /* 删除 */
91         $(#box).on(click, .setdel, function() {
92             $(this).closest(li).remove();
93             alert("删除成功!!!");
94         })
95     </script>
96 </html>

JQuery实现前端增删上下移文字计数

标签:function   length   jquer   获取   元素   div   append   src   截取   

原文地址:https://www.cnblogs.com/antao/p/12516103.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!