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

 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>
一辈子很短，努力的做好两件事就好；第一件事是热爱生活，好好的去爱身边的人；第二件事是努力学习，在工作中取得不一样的成绩，实现自己的价值，而不是仅仅为了赚钱。