前台不常用css、js（持续更新）

1.取消input边框

style="border: 0px;outline:none;cursor: pointer;"
//去除input边框在样式里加  border: 0px;
//去除当点击input框时显示的边框  outline:none;

2.限制input输入的最多字符数
maxlength="3"

3.限制input只能输入数字

<input class="" type="text" name="" id="" style="width: 200px;" maxlength="3"
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"/>

4.弹窗提示（css、js、html）
显示效果：

弹窗

//css
.tui_show{ position:fixed; z-index:9999; width:210px; background-color:#c0bfc6; border:1px solid #ccc; top:180px; left:-100px; margin-left:50%; display:none;}
.tui_tit{ height:32px; line-height:32px;}
.tui_close{ background-color:#c0bfc6; color:#131111; width:24px; height:24px; line-height:24px; font-size:24px; float:right; margin-right:3px; text-align:center; margin-top:3px; cursor:pointer;}
.tui_cnt{ padding:20px; min-height:50px;font-weight: bold;text-align: center;}

//js
$(document).ready(function(){//手动关闭弹窗
        $('.tui_close').click(function(){
        $('.tui_show').css('display','none');
    });
});
function closeTis(){//自动关闭弹窗
    $('.tui_show').css('display','none');
}
//使用时，将需要的信息显示到对应的div中，然后更改css使其显示，最后倒计时自动关闭弹窗
$('#txt').html("123");
$('.tui_show').css('display','block');
setTimeout("closeTis()",1500);

//html
<div class="tui_show"><!--弹出层-->
    <div class="tui_tit">
        <div class="tui_close">×</div><!--关闭按钮-->
        <div class=" clear"></div>
    </div>
    <div class="tui_cnt" id="txt"></div><!--显示提示文字-->
</div>

5.禁用系统键盘

//js
$(document).ready(function(){
    $("#te").focus(function(){
        document.activeElement.blur();
    });
});

//html
<textarea  id="te" ></textarea>

6.消除浏览器后退的所有动作。包括键盘、鼠标手势等产生的后退动作。

<script language="javascript">
        //防止页面后退
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function () {
            history.pushState(null, null, document.URL);
        });
    </script>

微信公众号同步更新

最后编辑于：2018.10.11 14:31:20