js日常开发总结

js日常案例总结

目录

文本框禁止复制粘贴

js保留两位小数

css设置文本不允许选中

js去除字符串中所有的标点符号，只保留中文、英文和数字

js数组与字符串互相转换

css设置文字超出...显示

---

文本框禁止复制粘贴

HTML中input输入框禁止复制粘贴剪切自动完成

<input type="password" 
onpaste="return false" 禁止粘贴
oncontextmenu="return false" 禁止右键弹出
oncopy="return false"  禁止复制:
oncut="return false" 禁止剪切
autocomplete="off" 关闭自动完成功能（缓存）
autocorrect="off" 禁用自动更正
autocapitalize="off" 来关闭键盘默认首字母大写(移动端)：
spellcheck="false" 不对元素的文本进行拼写检查
autofocus="autofocus"/> 自动获得焦点

js保留两位小数

经典方法，若数值为0则最终展示0.00，四舍五入。

//四舍五入保留2位小数（若第二位小数为0，则保留一位小数）
function keepTwoDecimal(num) {
 var result = parseFloat(num);
 if (isNaN(result)) {
 //alert('传递参数错误，请检查！');
 return false;
 }
 result = Math.round(num * 100) / 100;
 return result;
}

//四舍五入保留2位小数（不够位数，则用0替补）
function keepTwoDecimalFull(num) {
 var result = parseFloat(num);
 if (isNaN(result)) {
 //alert('传递参数错误，请检查！');
 return false;
 }
 result = Math.round(num * 100) / 100;
 var s_x = result.toString();
 var pos_decimal = s_x.indexOf('.');
 if (pos_decimal < 0) {
 pos_decimal = s_x.length;
 s_x += '.';
 }
 while (s_x.length <= pos_decimal + 2) {
 s_x += '0';
 }
 return s_x;
}

css设置文本不允许选中

默认情况下input框，textarea多行文本框等输入的文字是可以被选中的，但是div元素文本是不允许选中，设置如下：

<style type="text/css">
    .divCss{
        text-index:2rem;//首行缩进2格
        font-size:2.5rem;//字体大小(自适应)
        line-height:50px;//字体行高
        white-space:pre-warp;//字体保留原样式
        width:800px;宽度
        height:160px;//高度
        color:#555;字体颜色
        background-color:#eee;//背景颜色灰色
        padding:5px 10px;//字体间距
        word-wrap:break-word;//字体自动换行
        word-break:break-all;
        overflow: hidden;
        user-select:none;//文本不允许选中
    }
</style>
<div class="divCss">我们唯一能确定的就是不确定人生，不确定性也许也是机遇。</div>

js去除字符串中所有的标点符号，只保留中文、英文和数字

function palindrome(str) {
  var arr = str.replace(/[`:_.~!@#$%^&*() \+ =<>?"{}|, \/ ;' \\ [ \] ·~！@#￥%……&*（）—— \+ ={}|《》？：“”【】、；‘’，。、]/g,
    '');
  console.log(arr);//"0000"
}

js数组与字符串互相转换

//定义数组
var str=["祝你早安"，"午安"，"晚安"];
//js数组转换为字符串
str.join("分隔符");
//案例
str.join("");//连接字符串无任何分隔符，输出结果：祝你早安午安晚安
str.join("|");//连接字符串以"|"分隔，输出结果：祝你早安|午安|晚安
 
//定义字符串
var tmp="祝你早安,午安,晚安";
//js字符串转换为数组
var tmArr= tmp.split(",");
var len=tmArr.length;//长度3

 css设置文字超出...显示

<style>
 .contentCss{
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:blcok;
}

</stype>
<span class="contentCss" title="${data}">${data}</span>