前端css,js问题解决方式_el-number 阻止科学计数法-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42792507/article/details/108674225

本文总结了前端开发中的多种实用技巧，包括禁用input数字滚轮事件、实现文本溢出省略号效果、解决苹果手机input默认样式问题等。适用于提高前端用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.解决input number类型上下滚动禁用滚轮事件
去掉input在type="number"时的上下箭头

    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance:textfield;
    }    
    input[type="number"]{
        -moz-appearance:textfield;
    }

2.禁用input数字滚轮事件

<input type="number" onmousewheel="stopScrollFun"  onDOMMouseScroll="stopScrollFun"/>
function stopScrollFun(evt) {  
  evt = evt || window.event;  
    if(evt.preventDefault) {  
    // Firefox        evt.preventDefault();  
      evt.stopPropagation();  
    } else {  
      // IE  
      evt.cancelBubble=true;  
      evt.returnValue = false;  
  }  
  return false;  
}

3.使用element-ui+vue时，在el-input加上@mousewheel.native.prevent来阻止鼠标滚动

<el-input type="number" @mousewheel.native.prevent />
如果还需要禁止上下箭头，则可采用以下方式
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
   -webkit-appearance: none !important;
   margin: 0;
}
input[type="number"]{-moz-appearance:textfield;}

4.CSS实现隐藏滚动条但是可以滚动

	body::-webkit-scrollbar {display: none;}

5.超出隐藏加省略号

   单行文本溢出显示省略号  
     overflow:hidden; //超出的文本隐藏
     text-overflow:ellipsis; //溢出用省略号显示
      white-space:nowrap; //溢出不换行

   多行文本溢出显示省略号
	overflow: hidden
    text-overflow: ellipsis
    display: -webkit-box
    -webkit-line-clamp: 2
    -webkit-box-orient: vertical

6.如何去除苹果手机（ios）的input默认样式

 给input标签添加样式即可解决 input{-webkit-appearance: none;}

7.写代码时,html中图片最好不要直接用img标签,使用a或者其它标签包裹一下,因为直接使用img标签,在ios上会显示一个描边,不能去除;在写图片或者图标时,不要用background,直接使用img的src赋值,使用background时,有些手机,会缺损,不能完全展示

8.羊角符展示的问题: 在浏览器上展示的总是有问题, 改成后面这种方式就好

<span style="font-family:Arial;">&yen;</span>

在移动端写input搜索框时,需要在外面用form标签包裹,例如:

       <form action="#">
          <input type="search" class="left search_input" placeholder="请输入你想要搜索的内容">
       </form>
     (1)如果没有使用form包裹,在ios上,输入框输入完成之后,输入法中显示的是"换行",而不是"搜索",会搜索不了
     (2)如果点击输入法的搜索之后跳转页面的话,ios的输入法会自动消失;如果没跳转页面,ios的输入法不会自动消失,需要使input输入框失去焦点,例如: $('.shop-details .mask-bg .search .search_input').blur(); 失去焦点,输入法就好自动消失

10.单选框选择文字也可以选中: 2种方式

  (1)<label for="radiobutton">
      <input type="radio" name="radiobut" id="radiobutton" value="radiobut" />测试
     </label>
  (2)<div>
        <input type="radio" id="modeltype5" name="radiobut" value="" />
        <label for="modeltype5" class="cursor-pointer">测试</label>
      </div>

11.如果html的div元素上需要一个自定义属性,自定义属性的值是一个数组,那么,自定义属性要写成这种形式,外面使用单引号,数组中是双引号: data-area=’[“张三”,“王武”,1212]’ ;否则,如果外层使用双引号"",获取自定义属性时,只能取到"["’ ,不能获取到想要的数组,自定义属性中的数组需要使用JSON.stringfy()转成字符串格式

12.css动画时,transform:translateY(50px) 里面要使用px单位,不要用rem,否则安卓和ios的效果不一样

13.浏览器中输入数字时,如果数字太小,会自动转为科学计数法,处理方法:

 	function getFullNum(num){
    	  //处理非数字
    	   if(isNaN(num)){return num};
    	   //处理不需要转换的数字
    	   var str = ''+num;
           if(!/e/i.test(str)){return num;};
           return (num).toFixed(18).replace(/\.?0+$/, "");
         }
         getFullNum(9.1e-7);// 0.00000091

14.事件委托时,父元素必须是html页面中有的元素,不能使用动态渲染出来的父元素,否则不能触发事件,在绑定事件时,先使用unbind()方法接触元素上绑定过的方法,否则,可能会连续绑定同一个事件,连续跳转几次页面

15.在表单中写自定义校验规则,要注意:
callback()不能漏掉,否则,表单提交时,不会继续执行,也不会报错,很难发现问题

var validatePass2 = (rule, value, callback) => { 
	if (value === '') { 
		callback(new Error('请再次输入密码')); 
	} else if (value !== this.ruleForm2.pass) { 
	callback(new Error('两次输入密码不一致!'));
 } else { callback(); } };

16.line-height 在安卓会有兼容性问题, 使用时,文字可能没有居中, 使用padding: 10px 0 这样比较好,当此时使用padding时,有可能会受到其他同元素的line-height的影响,需要使用line-height: normal; 就可以消除其他line-height的影响