input表单那些事儿
2018-01-05 本文已影响6人
喵呜Yuri
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding:0;
margin: 0;
}
input,select{
border:1px solid green;
outline:none;
}
*::-webkit-scrollbar {/*隐藏滚轮*/
display: none;
}
/*placeholder字体颜色*/
input::-webkit-input-placeholder{
color: #177cb0;
}
input::-moz-placeholder{
color: #177cb0;
}
input:-ms-input-placeholder{
color: #177cb0;
}
/*背景自动填充问题*/
input:-webkit-autofill {
-webkit-text-fill-color: #eee !important;
-webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset !important;
transition: background-color 5000s ease-in-out 0s;
}
/*input[type=number]不让出现*/
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.div{
width:100px;
height:100px;
border:1px solid #333;
background-color:pink;
}
.div.green{
background-color: green!important;
}
</style>
</head>
<body>
<form id="myform" action="add">
<input type="text" name="username">
<input type="text" name="tel" autocomplete="off">
<select name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</body>
</html>
处理form字段：
js代码：
$('#myform').serialize();//username=Jack&tel=13883008967
$('#myform').serializeArray()
这里没有专门转化为json的方法，所以自己写一个
function serializeOption(str) {
var str1 = str.replace(/=/ig,'":"').replace(/&/ig,'","');
var strJson = '{"'+str1+'"}';
return JSON.parse(strJson);
}
serializeOption($('#myform').serialize());//{“username”：“Jack”，“tel”：“13883008967}
