前端问题小记

杂记判断输入框是否全为空格、回车调起打印 数组根据索引值删除数组数据关于数组不规则下标怎么循环输出 div实现文本溢出显示省略号 inputcheckbox 全选 全不选功能模块改变input的placeholder样式去掉input标签获取焦点后的边框 textarea通过换行或者回车把多行数字分割成数组

杂记

判断输入框是否全为空格、回车

//1------------------------ strValue = $('#ping-string').val().replace(/\n/g, ''); if (strTest(strValue) == "") { show("数据不能为空") $('#ping-string').val('') return false } // 判断输入框是否全为回车、空格或为空 function strTest(str) { for (var i = 0;(str.charAt(i) == ' ') && i < str.length; i++); if (i == str.length) return ''; //整个字符串是空格 var newstr = str.substr(i); for (var i = newstr.length - 1; newstr.charAt(i) == ' ' && i >= 0; i--); newstr = newstr.substr(0, i + 1); return newstr; } //2------------------------ function JTrim(s) { return s.replace(/(^\s*)|(\s*$)/g, ""); } function check(){ var content = $("#content").val(); if(JTrim(content)==""){ alert("问题内容不能为空!"); return false; } }

调起打印

window.print();

数组

根据索引值删除数组数据

let arr = [2,3,4,5,6] let delInd = [0,2,3] for(let i = 0;i < delInd.length ;i++){ arr.splice(delInd[i]-i,1) }

关于数组不规则下标怎么循环输出

var data = new Array() data[0] = "标题" data[1] = "11111" data[2] = "22222" data[9] = "99999" for (let i in data) { if(i!=0){ //忽略第一个 console.log(data[i]) } }

div

实现文本溢出显示省略号

css实现

// 单行文本 .item { width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // 多行文本 .item { width: 100px; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 3; overflow: hidden; }

js实现

function filterFun(value) { if (value && value.length > 50) { //字符最大长度 value = value.substring(0, 50) + "..."; //超过省略 } return value; }

input

checkbox 全选 全不选功能模块

<table class="header-table" cellspacing="0" cellpadding="0" border="0"> <thead> <tr> <th> <input class="checkall" type="checkbox" > </th> <th class="header-box_th_2">序号</th> </tr> </thead> <tbody> <tr> <td> <input class="j-checkbox" type="checkbox"> </td> <td>1</td> </tr> <tr> <td> <input class="j-checkbox" type="checkbox"> </td> <td>2</td> </tr> </tbody> </table> $(".checkall").change(function() { $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked")); }) $(".header-table").on('change', '.j-checkbox', function() { if ($(".j-checkbox:checked").length === $(".j-checkbox").length) { $(".checkall").prop("checked", true); } else { $(".checkall").prop("checked", false); } });

改变input的placeholder样式

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #DCDFE6; } input::-moz-placeholder { /* Firefox 19+ */ color: #DCDFE6; } input:-ms-input-placeholder { /* IE 10+ */ color: #DCDFE6; } input:-moz-placeholder { /* Firefox 18- */ color: #DCDFE6; }

去掉input标签获取焦点后的边框

input { outline: none }

textarea

通过换行或者回车把多行数字分割成数组

<textarea clase="tra"></textarea> <div class="btn"></div> $('.btn').click(function() { var result = $('.tra').val().split(/[(\r\n)\r\n]+/); console.log(result); })