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