html知识集锦

1. *.min.css和*.css的区别

bootstrap.css 和 boostrap.min.css 的区别就是:前者是未压缩的,后者是压缩过的。一般情况下,未压缩的用于开发环境,如果程序出错方便调试。而压缩过的用生生产环境,大大减少网络数据传输量,便之更快更节约流量……其它 .min.css 和 .min.js 文件同理

 

.min.css 生成工具

YUI Compressor:  https://github.com/yui/yuicompressor

Npm node-minify

 

2. 表单中input输入,提交时判断,不能为空并提示

(1):

<input type="" required="required" name="" id="" value="" />

加上required 这个属性 ,就成了必填字段 。

(2):

if (XX==null|| xx ==""){ alert(不能为空)}

(3):



    // 判断input框(除了类名为min1和max7)是否为空
    function isEmpty(){
        var flag=true;
        $("input[type='text']").not(".min1").not(".max7").each(function(i,item){
            if(item.value==""){
                flag=false;
                return false;
            }
        });
        return flag;
    }
    if(isEmpty()===false){
          tipsClass.show({msg: "订单金额或提成不能为空!"});
      }



<form id="baseForm" name="baseForm" action="xxx.action" method="post"

onkeydown="javascript: if (event.keyCode == 13){return isEmpty();}">

<input id="name" name="name" type="text" />

<input type="button" value="提交" onclick="isEmpty();"/>

</form>

 

3.   JS控制 input 标签输入为数字及错误提示:

假设现在需要限制<input>标签内输入的内容为数字,并且对其大小进行判断。

涉及的知识主要有:
1.onblur , onblur 事件会在对象失去焦点时发生,也就是当焦点离开当前输入框的时候

οnblur=“SomeJavaScriptCode”

2.onkeyup,onkeyup 属性在用户(在键盘上)释放按键时触发。也就是每输入一个字符,就立马判断是否为非法字符

<element οnkeyup=“script”>,script使用适当的正则表达式就能够进行判断输入是否为数字

首先是<input>标签

 需要限制输入的内容为数字,且在离开当前输入框时判断输入是否满足要求,不满足是弹出提示。

<input type="text" id="id名称" onkeyup="value=value.replace(/[^(\d)]/g,'')"
 								onblur="checkNum()" />

onkeyup中的正则表达式是限制内容为数字,不是数字的话使用空格替换。
onblur中的checkNum() 是调用函数进行判断输入数值是否非法。

 

其次是JS

 首先通过<input>标签的id获取输入内容,并转换为整数值

var Num = parseInt(document.getElementById("id名称").value)

因为通过document.getElementById(“id名称”).value获取的输入内容是字符串,所以需要使用parseInt() 将之转化为整型。

 下一步则是判断输入的数值是否合法,不合法的话弹出提示框并清空输入框。

if(Num > 0 || Num < 100 || isNaN(Num)){      //isNaN(Number)判断Number是否为空
        alert("输入数据需在0~100之间");
        document.getElementById('Num').value = "";     //清空输入框
    }

完整代码: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CeckNumber</title>
</head>
<script type="text/javascript">
    function checkNum(){
        var Num = parseInt(document.getElementById("id名称").value)
        if(Num > 0 || Num < 100 || isNaN(Num)){      
            alert("输入数据需在0~100之间");
            document.getElementById('id名称').value = ""; 
        }
    }
</script>
<body>
<input type="text" id="id名称" onkeyup="value=value.replace(/[^(\d)]/g,'')"
       onblur="checkNum()" />
</body>
</html>

 

4.  input框输入实时检测校验

1. 只能输入英文、数字且必须以英文开头

<input type="text" placeholder="只能英文、数字,英文开头" onKeyUp = "value = value.replace(/[^a-z0-9]|^[^a-z]/ig,'')" />

2、只能输英文、数字和'_'

<input type="text" placeholder="只能输英文、数字和'_'" onKeyUp="value=value.replace(/[\W]/g,'')" />

 

5.  CSS:input和button放在同一行

给左边的控件添上一句 float:left;

    <style>
        #txtTask{
            float:left;
            min-width:85%;
        }
    </style>
html:

<input type="text" id="txtTask" class="form-control" name="task" placeholder="请输入内容" />
 &nbsp;&nbsp;&nbsp;&nbsp;

<input type="button" class="btn btn-danger" value="发送" />

 

6. 空格表示:

&nbsp;

空格字符由&+n+b+s+p+;组成字符,后面的分号记住不能少了。

7. script位置

script 一般放在head或body里面

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值