原生JS表单美化

作者: 渣渣灰灰 | 来源:发表于2018-01-11 12:19 被阅读0次

原生JS表单美化
jQuery获取/设置表单内容
15、获取和设置表单内容
用css或js美化表单
表单美化
表单美化
js原生ajax表单验证
调用webpack打包后的js中的函数报错问题
【it修真院小课堂第132期】angular js常用指令 ng
使用form表单进行前后台传值

1.表单美化—单选框

html结构

    <div class="radio-group">
        <label><input type="radio" name="sex" value="男" checked> 男</label>
        <label><input type="radio" name="sex" value="女"> 女</label>
    </div>
    <div class="radio-group">
        <input type="radio" name="xueli" value="本科"> 本科
        <input type="radio" name="xueli" value="大专"> 大专
    </div>

css样式

    .radio{
        display:inline-block;
        width:20px;
                height:20px;
        border-radius:50%;
        border:1px solid #666;
        margin-right:5px;
        margin-bottom:20px;
        vertical-align:top;
        text-align:center;
        cursor:pointer;
        user-select:none;
    }
    .radio.active:after{
        content:"•";
        font-size:30px;
        line-height:16px;
    }

js代码

<script>
//单选框插件
var radioGroup=document.querySelectorAll('.radio-group');
radioGroup.forEach(function(group){
    var radios=group.querySelectorAll('input[type="radio"]');
    radios.forEach(function(radio){
        //隐藏原生态控件
        radio.style.display='none';
        var span=document.createElement('span');
                span.className='radio'+(radio.checked?' active':'');
        radio.parentNode.insertBefore(span,radio);
        span.onclick=function(){
            //清除所有span的active
            group.querySelectorAll('span.radio').forEach(function(item){
                item.className='radio';
            })
            this.className='radio active';
            radio.checked=true;
        }
    })
})
</script>

2.表单美化—复选框

html结构

    <div class="checkbox-group">
        <label><input type="checkbox" name="caixi" value="川菜" checked> 川菜</label>
        <label><input type="checkbox" name="caixi" value="粤菜"> 粤菜</label>
        <label><input type="checkbox" name="caixi" value="鲁菜" checked> 鲁菜</label>
    </div>
    <div class="checkbox-group">
        <input type="checkbox" name="aihao" value="足球"> 足球
        <input type="checkbox" name="aihao" value="篮球" checked> 篮球
        <input type="checkbox" name="aihao" value="排球" checked> 排球
    </div>
    <div class="checkbox-group">
        <input type="checkbox" name="aihao" value="足球"> 足球
        <input type="checkbox" name="aihao" value="篮球" checked> 篮球
        <input type="checkbox" name="aihao" value="排球" checked> 排球
    </div>

css样式

    .checkbox{
        display:inline-block;
        width:20px;height:20px;
        border-radius:3px;
        border:1px solid #666;
        margin-right:5px;
        margin-bottom:20px;
        vertical-align:top;
        text-align:center;
        cursor:pointer;
        user-select:none;
    }
    .checkbox.active:after{
        content:"√";
        font-size:20px;
        line-height:16px;
    }

js代码

<script>
//复选框插件
var checkboxGroup=document.querySelectorAll('.checkbox-group');
checkboxGroup.forEach(function(group){
    var checkboxs=group.querySelectorAll('input[type="checkbox"]');
    checkboxs.forEach(function(checkbox){
        //隐藏原生态控件
        checkbox.style.display='none';
        var span=document.createElement('span');
                span.className='checkbox'+(checkbox.checked?' active':'');
        checkbox.parentNode.insertBefore(span,checkbox);
        span.onclick=function(){
            this.className='checkbox'+(this.className.indexOf('active')==-1?' active':'');
            checkbox.checked=true;
        }
    })
})
</script>

3.表单美化—下拉列表

html结构

    <select>
        <option value="#">请选择</option>
        <option value="本科" selected>本科</option>
        <option value="大专">大专</option>
        <option value="中专">中专</option>
    </select>

    <select>
        <option value="#">请选择</option>
        <option value="轻音乐">轻音乐</option>
        <option value="流行音乐">流行音乐</option>
        <option value="摇滚" selected>摇滚</option>
    </select>

css样式

    .select-wrap{
        position:relative;
        display:inline-block;
    }
    .select-wrap a{
        text-decoration:none;
        display:block;
        border:1px solid #999;
        padding:3px 5px;
        border-radius:3px;
        color:#303030;
    }
    .select-wrap a:after{
        display:inline-block;
        float:right;
        content:"▼";
    }
    .select-wrap ul{
        display:none;
        padding:3px 0;
        min-width:100px;
        margin:0;
        position:absolute;
        list-style:none;
        border:1px solid #999;
        background-color:#fff;
    }
    .select-wrap ul > li{
        padding:2px 5px;
        cursor:default;
    }
    .select-wrap ul > li:hover{
        background-color:#ccc;
    }

js代码

<script>
//下拉列表框插件
var select=document.querySelectorAll('select');
select.forEach(function(_select){
    var span=document.createElement('span');
            span.className='select-wrap';
    _select.parentNode.insertBefore(span,_select);
    span.appendChild(_select);
    _select.style.display='none';
    var options=_select.querySelectorAll('option'),
            ul=document.createElement('ul'),
            lis='',
            val=options[0].value,
            txt=options[0].innerText;
    options.forEach(function(option){
        lis+='<li>'+option.innerText+'</li>';
        if(option.selected){
            val=option.value;
            txt=option.innerText;
        }
    })
    ul.innerHTML=lis;
    var a=document.createElement('a');
    a.href=val;
    a.innerText=txt;
    a.onclick=function(e){
        e.preventDefault();
        e.stopPropagation();
        ul.style.display='block';
    }
    span.insertBefore(a,_select);
    //ul
    span.insertBefore(ul,_select);
    var lis=ul.querySelectorAll('li');
    lis.forEach(function(li,index){
        li.index=index;
        li.onclick=function(){
            a.innerText=this.innerText;
            ul.style.display='none';
            //选中
            _select.selectedIndex=this.index;
        }
    })
})
document.onclick=function(){
    var selectWrap=document.querySelectorAll('.select-wrap');
    selectWrap.forEach(function(wrap){
        wrap.querySelector('ul').style.display='none';
    })
}
</script>

4.表单美化—上传按钮

html结构

<input type="file">

css样式

    <style>
    .file{
        display:inline-block;
        position:relative;
        overflow:hidden;
    }
    .file img{
        display: block;
        margin:20px 26px;
        width: 150px;
        height: 150px;
        border: 1px solid #fcaf17;
        border-radius: 5px;
    }
    .file button{
        border-radius:5px;
        border:1px solid #e0861a;
        display:inline-block;
        padding:7px 15px;
        background-color:#fff;
        cursor:pointer;
        outline:none;
        color:#4a3113;
        background: linear-gradient(to right,#fcaf17,#ffc20e);
        margin:0 10px 
    }
    .file input[type="file"]{
        position:absolute;
        top:-999em;
        visibility:hidden;
    }
    </style>

js代码

<script>
var input=document.querySelectorAll('input');
input.forEach(function(_input){
    var div=document.createElement('div');
    div.className='file';
    _input.parentNode.insertBefore(div,_input);

    var button=document.createElement('button');
    // 三元运算判断
    // button.innerHTML=_input.title?_input.title:'上传图片';
    // 短路判断
    button.innerHTML=_input.title || "上传图片";

    //添加获取img对象
    var img=document.createElement('img');
    img.src="images/nophoto.gif";
    //添加删除按钮
    var button_two=document.createElement('button');
    button_two.innerHTML="移除图片";
    div.appendChild(img);
    div.appendChild(_input);
    div.appendChild(button);
    div.appendChild(button_two);
    //自己点击自己
    var files=document.querySelectorAll('.file');
    files.forEach(function(files){
        files.querySelector('button').onclick=function(){
            files.querySelector('input[type="file"]').click();
        }
        
    })
    _input.onchange=function(){
        // console.dir(this.files[0].size);
        // var filesize=1024*1024*0.5;
        // this.files[0].size<=filesize || alert("图片不能超过512kb");
            //判断文件类型
            var fileName=this.files[0].name,
                    flieExt=fileName.split('.').pop().toLowerCase();
            if(flieExt!='jpg' && flieExt!='png' && flieExt!='gif'){
                    alert('请上传jpg、png、gif格式图片！');
                    this.value='';
                    return false;
            }

            //判断文件大小
            var fileSize=1024*1024*0.5;//512kb
            //判断大小 超过512KB则提示，不上允许上传
            if(this.files[0].size>=fileSize){
                alert('您选择的文件大于512KB！');
                this.value='';
                return false;
            }

        var file=this.files[0];
            //建一条文件流来读取图片  
            var reader = new FileReader();  
            //根据url将文件添加的流中
            reader.readAsDataURL(file);  
            //实现onload接口  
            reader.onload = function(e) {  
            //获取文件在流中url
            url =e.target.result;  
            //将url赋值给img的src属性
            img.src = url;  
            } 
        }
    button_two.onclick=function(){  
            //将img的src属性赋值为空串
            img.src = "images/nophoto.gif";  
            //选择文件框的value属性赋值为空串</span>  
            _input.value = "";  
     }  
})
</script>

5.表单美化—滑块

html结构

<h1 align="center">模拟系统滑块</h1>
<!-- wrapper start -->
<div class="wrapper">
    <input type="range" class="blue" max="1000" value="500">
    <input type="range" class="red" max="200" value="100">
</div>
<!-- wrapper end -->

css样式

    <style>
    *{margin:0;padding:0;}
    body{font-family:"微软雅黑";font-size:16px;}
    ul{list-style:none;}
    h1{padding:60px;}

    .wrapper{width:800px;margin:0 auto;}

    /* range css */
    .range{position:relative;display:inline-block;width:400px;height:40px;border-radius:20px;background-color:gray;margin-right:20px;margin-bottom:20px;}

    .range input{position:absolute;top:150px;}
    .range s,
    .range b{display:block;position:absolute;width:0;height:100%;top:0;left:0;cursor:default;}

    .range s{width:40px;border-radius:inherit;background-color:black;z-index:10;}
    .range b{background-color:green;border-radius:inherit;}

    .range.blue s{background-color:#000;}
    .range.blue b{background-color:blue;}
    </style>

js代码

<script>
var ranges=document.querySelectorAll('input[type="range"]');
ranges.forEach(function(range){

    //包装
    var span=document.createElement('span');
            span.className='range'+(range.className?' '+range.className:'');

    var s=document.createElement('s');
    var b=document.createElement('b');

    span.appendChild(s);
    span.appendChild(b);

    //range.style.display='none';
    range.parentNode.insertBefore(span,range);
    span.appendChild(range);

    range.oninput=function(){
        console.log(this.value)
    }

    var rmin=range.min || 0;
    var rmax=range.max || 100;
    var rvalue=range.value || 0;
    var rpct=rvalue/rmax;

    var spanWidth=span.offsetWidth;
    var sWdith=s.offsetWidth;
    var smaxLeft=spanWidth-sWdith;

    var _left=Math.round(smaxLeft*rpct);
    s.style.left=_left+'px';
    b.style.width=_left+sWdith+'px';

    //拖拽
    s.onmousedown=function(e){

        var oldX=e.clientX;
        var 
        sLeft=s.offsetLeft;
        document.onmousemove=function(e){
            _left=sLeft+(e.clientX-oldX);
            if(_left<=0)_left=0;
            if(_left>=smaxLeft)_left=smaxLeft;
            s.style.left=_left+'px';
            b.style.width=_left+sWdith+'px';
            range.value=Math.round(rmax*(_left/smaxLeft));
            e.preventDefault();
        }
        document.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseout=null;
        }
    }
})
</script>

原生JS表单美化
1.表单美化—单选框 html结构 css样式 js代码 2.表单美化—复选框 html结构 css样式 js代码...
jQuery获取/设置表单内容
原生js是通过value属性来获取/设置表单内容 jQuery中是通过val()方法来获取/设置表单内容 val(...
15、获取和设置表单内容
val()：获取和设置表单内容原生js是通过value属性来获取或者设置表单元素值 jQuery是通过 var(...
用css或js美化表单
前端在做开发的时候，难免会遇到要美化表单的时候，最常见的就是设计稿做的跟默认的样式完全不一样，我们需要通过css或...
表单美化
美化input 美化input的代码示例：使用的工具： canuise：查看属性在不同浏览器的支持情况 QQ截图...
表单美化
fake-baidu html： css: javascript: output: 图片上传 html: css:...
js原生ajax表单验证
主要说一下ajax表单验证的步骤 (1):创建ajax对象var oAjax = null; if(window....
调用webpack打包后的js中的函数报错问题
今天用原生js和jquery动态生成一个表单弹窗，因为想在使用的时候只引入一个js文件，所以想到用webpack将...
【it修真院小课堂第132期】angular js常用指令 ng
1.背景介绍 1.1原生js表单验证的劣势我们在获取用户输入值的时候，有一个必要的环节就是进行表单验证，java...
使用form表单进行前后台传值
form表单的写法一、使用原生的form表单例如通过提交表单进行更新操作，原生表单的写法如下：方法1: 对应的...