html知识集锦

最新推荐文章于 2023-04-15 22:52:22 发布

weixin_888988

最新推荐文章于 2023-04-15 22:52:22 发布

阅读量101

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_39833509/article/details/103886776

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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. 空格表示：

 

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

7. script位置

script 一般放在head或body里面

weixin_888988

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html知识集锦

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

扫一扫

专栏目录