js 冷知识

发表于 更新于 分类于 本文字数： 1.6k 阅读时长 ≈ 1 分钟

  1. 去除 input [type=’number’] 时的右侧上下箭头

    / 在 chrome 下：/

     input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button{
     -webkit-appearance: none !important;
     margin: 0;
     padding-left:5px;
 }

 /*Firefox下：*/
 input[type="number"]{-moz-appearance:textfield;}

  1. 判断小数不能大于两位

       var hopePriceLength = hopePrice.toString().split(".")[1].length;
     if(hopePriceLength>2){
         notify('请输入正数，最多两位小数','error');
         $(`#${mid}jp-hope-price`).focus();
         return false;
     }

3. 去掉 ios 手机上 tap 时的黑色背景

1
2
3
4
5
a,img,button,input,textarea
{-webkit-tap-highlight-color:rgba(255,255,255,0);}

2.另外，如何去掉textarea,input的默认样式：
input,textarea{-webkit-appearance:none;}

4. 判断数据的类型

1
2
3
4
5
6
7
8
9
10
11
var isType = function( type ){
    return function( obj ){
          return Object.prototype.toString.call( obj ) === '[object '+ type +']';
     }
};

 var isString = isType( 'String' );
 var isArray = isType( 'Array' );
 var isNumber = isType( 'Number' );
console.log( isArray( [ 1, 2, 3 ] ) );

4.HTML5 去除 input [type=search] 的默认边框和删除按钮

x-webkit-speech 属性：在 GOOGLE 浏览器上 还会显示一个小话筒
autocomplete=”off” 属性 关闭浏览器自动记录之前输入的值

webkit 内核浏览器里 input 框类型如果是 type=”search”
那么将会有边框问题，border:0px 也不能起到作用；

解决方案

1
input[type="search"]{-webkit-appearance:none;}

移除 重置默认的 Webkit 引擎下的 Input 样式

1
2
3
4
5
6
7
8
9
10
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}

5. 禁止 ios 和 android 用户选中文字

1
css{-webkit-touch-callout: none}