JS模擬并美化的表單控件完整實(shí)例
更新時(shí)間：2015年08月19日 15:50:23 作者：企鵝
這篇文章主要介紹了JS模擬并美化的表單控件實(shí)現(xiàn)方法,涉及javascript結(jié)合css樣式美化表單的功能,非常美觀實(shí)用,需要的朋友可以參考下
本文實(shí)例講述了JS模擬并美化的表單控件效果實(shí)例。分享給大家供大家參考。具體如下：
這里演示使用JS美化并模擬網(wǎng)頁表單控件，十分漂亮的表單效果，使用時(shí)可以將代碼內(nèi)的JS保存為文件, 方便調(diào)用，使用方法：WellForm(element) //element 為表單元素。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-like-table-control-style-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模擬表單控件</title>
<style type="text/css">
/* ----表單控件CSS開始---- ↓ */
.WellForm *{margin:0;padding:0;}
.WellForm{font-size:12px;font-family:arial;line-height:21px;}
.WellForm pre{float:left;margin-right:10px;}
/*background*/
.WellForm .TextL,.WellForm .TextR,.WellForm .WellText,
.WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect,
.WellForm .WellTextArea .T,
.WellForm .WellTextArea .T .TL,
.WellForm .WellTextArea .T .TM,
.WellForm .WellTextArea .B,
.WellForm .WellTextArea .B .BL,
.WellForm .WellTextArea .B .BM,
.WellForm .WellRadio,
.WellForm .WellCheckBox,
.WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton
{background:url(images/WellForm.gif) no-repeat;}
/*WellText*/
.WellForm .TextL,.WellForm .TextR,.WellForm .WellText{float:left;width:5px;height:21px;}
.WellForm .TextL{background-position:0 0;}.WellForm .TextR{background-position:right 0;}
.WellForm .TextLH{background-position:0 -21px;}.WellForm .TextRH{background-position:right -21px;}
.WellForm .WellText{border:0;width:auto;height:17px;padding:2px 0;padding:3px 0 1px\9;*padding:3px 0 1px;font-family:arial;background-repeat:repeat-x;background-position:0 -42px;}
.WellForm .WellTextH{background-position:0 -63px;}
/*WellSelect*/
.WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect{float:left;height:21px;}
.WellForm .SelectL{width:3px;background-position:0 -84px;}
.WellForm .SelectR{width:16px;cursor:pointer;background-position:right -84px;margin-right:5px;}
.WellForm .WellSelect{position:relative;cursor:pointer;background-repeat:repeat-x;background-position:0 -105px;}
.WellForm .WellSelect select{display:none;}
.WellForm .WellSelect em{position:absolute;top:0;left:3px;color:#fff;height:21px;display:block;line-height:21px;font-style:normal;}
.WellForm .WellSelect ul{list-style-type:none;position:absolute;top:18px;left:0;z-index:1000;display:none;background:#6C6D70;}
.WellForm .WellSelect ul li {color:#fff;height:20px;cursor:pointer;line-height:20px;padding-left:3px;}
.WellForm .WellSelect ul li.hover{background:#333;}
/*WellTextArea*/
.WellForm .WellTextArea{float:left;}
.WellForm .WellTextArea .T,
.WellForm .WellTextArea .T .TL,
.WellForm .WellTextArea .T .TM,
.WellForm .WellTextArea .B,
.WellForm .WellTextArea .B .BL,
.WellForm .WellTextArea .B .BM
{height:5px;overflow:hidden;}
.WellForm .WellTextArea .T{float:left;width:100%;background-position:right -126px;}
.WellForm .WellTextArea .TH{float:left;width:100%;background-position:right -131px;}
.WellForm .WellTextArea .T .TL{background-position:0 -126px;}
.WellForm .WellTextArea .TH .TL{background-position:0 -131px;}
.WellForm .WellTextArea .T .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -136px;}
.WellForm .WellTextArea .TH .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -141px;}
.WellForm .WellTextArea .B{float:left;width:100%;background-position:right -146px;}
.WellForm .WellTextArea .BH{float:left;width:100%;background-position:right -151px;}
.WellForm .WellTextArea .B .BL{background-position:0 -146px;}
.WellForm .WellTextArea .BH .BL{background-position:0 -151px;}
.WellForm .WellTextArea .B .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -156px;}
.WellForm .WellTextArea .BH .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -161px;}
.WellForm .WellTextArea .M,
.WellForm .WellTextArea .M .MR
{float:left;background:url(images/TextArea-1.gif) repeat-y;}
.WellForm .WellTextArea .M{background-position:0 0;}
.WellForm .WellTextArea .M .MR{background-position:right 0;}
.WellForm .WellTextArea .MH,
.WellForm .WellTextArea .MH .MR
{float:left;background:url(images/TextArea-2.gif) repeat-y;}
.WellForm .WellTextArea .MH{background-position:0 0;}
.WellForm .WellTextArea .MH .MR{background-position:right 0;}
.WellForm .WellTextArea textarea{float:left;border:0;margin:0 5px;overflow:auto;background:url(images/TextArea.gif);font-family:arial;font-size:12px;resize:none;}
/*WellRadio*/
.WellForm .WellRadio{float:left;width:13px;height:13px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:-15px -270px;}
.WellForm .WellRadioH{background-position:-15px -284px;}
.WellForm .WellRadio input{margin-top:13px;display:none;}
/*WellCheckBox*/
.WellForm .WellCheckBox{float:left; width:12px;height:12px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:0 -270px;}
.WellForm .WellCheckBoxH{background-position:0 -283px;}
.WellForm .WellCheckBox input{margin-top:12px;display:none;}
/*WellButton*/
.WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton{cursor:pointer;float:left;width:5px;height:26px;}
.WellForm .ButtonL{background-position:0 -166px;}.WellForm .ButtonR{background-position:right -166px;margin-right:10px;}
.WellForm .ButtonLH{background-position:0 -192px;}.WellForm .ButtonRH{background-position:right -192px;}
.WellForm .WellButton{border:0;width:auto;font-size:12px;color:#fff!important;height:26px;padding:0 10px 3px;*padding-bottom:0;padding-bottom:0\9;font-family:arial;background-repeat:repeat-x;background-position:0 -218px;}
.WellForm .WellButtonH{background-position:0 -244px;}
/* ----表單控件CSS結(jié)束---- ↑ */
form{float:left;padding:20px;border:2px dashed #ccc;margin:20px 0 0 40px;width:380px;}
form .item{float:left;clear:both;width:100%;margin-bottom:10px;}
.WellForm label{float:left;width:4em;height:21px;text-align:right;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var aForm = document.getElementsByTagName("form");
//多個(gè)表單
for (var i = 0; i < aForm.length; i++) WellForm(aForm[i]);
};
/*------------------------------------------------- +
可以將以下JS保存為文件, 方便調(diào)用
使用方法：WellForm(element) //element 為表單元素
+------------------------------------------------- */
// 獲取class
function getClass(sClass, oParent)
{
var aClass = [];
var reClass = new RegExp("(^| )" + sClass + "( |$)");
var aElem = (oParent || document).getElementsByTagName("*");
for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
return aClass
}
// class是否存在
function hasClass(obj, sClass)
{
var reg = new RegExp("(^|\\s)" + sClass + "(\\s|$)");
return reg.test(obj.className)
}
// 添加class
function addClass(obj, sClass)
{
hasClass(obj, sClass) || (obj.className += " "+sClass)
}
// 刪除class
function removeClass(obj, sClass)
{
if (hasClass(obj, sClass))
{
var reg = new RegExp("(^|\\s)" + sClass + "(\\s|$)");
obj.className = obj.className.replace(reg, "");
}
}
// 上一個(gè)元素
function prevElement(obj)
{
return obj.previousSibling || obj.previousElementSibling || null
}
// 下一個(gè)元素
function nextElement(obj)
{
return obj.nextSibling || obj.nextElementSibling || null
}
// 自定義表單函數(shù)
function WellForm(form)
{
var i = 0;
var zIndex = 1;
var aInput = form.getElementsByTagName("input");
var aSelect = form.getElementsByTagName("select");
var aTextArea = form.getElementsByTagName("textarea");
form.className = "WellForm";
/* 單行文本框 */
var aText = [];
for (i = 0; i < aInput.length; i++) (aInput[i]["type"] == "text" || aInput[i]["type"] == "password") && aText.push(aInput[i]);
for (i = 0; i < aText.length; i++)
{
var oTextL = document.createElement("div");
var oTextR = document.createElement("div");
oTextL.className = "TextL";
oTextR.className = "TextR";
aText[i].className = "WellText";
aText[i].parentNode.insertBefore(oTextL, aText[i]);
aText[i].parentNode.insertBefore(oTextR, nextElement(aText[i]));
//獲取焦點(diǎn)
aText[i].onfocus = function ()
{
addClass(this, "WellTextH");
addClass(prevElement(this), "TextLH");
addClass(nextElement(this), "TextRH")
};
//失去焦點(diǎn)
aText[i].onblur = function ()
{
removeClass(this, "WellTextH");
removeClass(prevElement(this), "TextLH");
removeClass(nextElement(this), "TextRH")
}
}
/* 多行文本框 */
for (i = 0; i < aTextArea.length; i++)
{
var oTextArea = document.createElement("div");
oTextArea.className = "WellTextArea";
//上邊框
var oT = document.createElement("div");
var oTL = document.createElement("div");
var oTM = document.createElement("div");
oT.className = "T";
oTL.className = "TL";
oTM.className = "TM";
oTL.appendChild(oTM);
oT.appendChild(oTL);
//中間邊框
var oM = document.createElement("div");
var oMR = document.createElement("div");
oM.className = "M";
oMR.className = "MR";
oM.appendChild(oMR);
//下邊框
var oB = document.createElement("div");
var oBL = document.createElement("div");
var oBM = document.createElement("div");
oB.className = "B";
oBL.className = "BL";
oBM.className = "BM";
oBL.appendChild(oBM);
oB.appendChild(oBL);
//插入結(jié)構(gòu)
aTextArea[i].parentNode.insertBefore(oTextArea, aTextArea[i]);
oMR.appendChild(aTextArea[i]);
oTextArea.appendChild(oT);
oTextArea.appendChild(oM);
oTextArea.appendChild(oB);
oTextArea.style.width = oMR.offsetWidth + "px";
//獲取焦點(diǎn)
aTextArea[i].onfocus = function ()
{
var M = this.parentNode.parentNode;
addClass(M, "MH");
addClass(prevElement(M), "TH");
addClass(nextElement(M), "BH")
};
aTextArea[i].onblur = function ()
{
var M = this.parentNode.parentNode;
removeClass(M, "MH");
removeClass(prevElement(M), "TH");
removeClass(nextElement(M), "BH")
}
}
/* 單選框 */
var aRadio = [];
for (i = 0; i < aInput.length; i++) aInput[i]["type"] == "radio" && aRadio.push(aInput[i]);
for (i = 0; i < aRadio.length; i++)
{
var oRadio = document.createElement("div");
oRadio.className = "WellRadio";
aRadio[i].parentNode.insertBefore(oRadio, aRadio[i]);
oRadio.appendChild(aRadio[i]);
aRadio[i].checked && addClass(aRadio[i].parentNode, "WellRadioH");
oRadio.onclick = function ()
{
var siblings = getClass("WellRadio", this.parentNode);
for (i = 0; i < siblings.length; i++)
{
removeClass(siblings[i], "WellRadioH");
siblings[i].children[0].checked = false;
}
addClass(this, "WellRadioH");
this.children[0].checked = true
}
}
/* 復(fù)選框 */
var aCheckBox = [];
for (i = 0; i < aInput.length; i++) aInput[i]["type"] == "checkbox" && aCheckBox.push(aInput[i]);
for (i = 0; i < aCheckBox.length; i++)
{
var oCheckBox = document.createElement("div");
oCheckBox.className = "WellCheckBox";
aCheckBox[i].parentNode.insertBefore(oCheckBox, aCheckBox[i]);
oCheckBox.appendChild(aCheckBox[i]);
aCheckBox[i].checked && addClass(aCheckBox[i].parentNode, "WellCheckBoxH");
oCheckBox.onclick = function ()
{
this.children[0].checked = !this.children[0].checked;
this.children[0].checked ? addClass(this, "WellCheckBoxH") : removeClass(this, "WellCheckBoxH")
}
}
/* 按鈕 */
var aButton = [];
for (i = 0; i < aInput.length; i++) (aInput[i]["type"] == "button" || aInput[i]["type"] == "submit") && aButton.push(aInput[i]);
for (i = 0; i < aButton.length; i++)
{
var oBtnL = document.createElement("div");
var oBtnR = document.createElement("div");
oBtnL.className = "ButtonL";
oBtnR.className = "ButtonR";
aButton[i].className = "WellButton";
aButton[i].parentNode.insertBefore(oBtnL, aButton[i]);
aButton[i].parentNode.insertBefore(oBtnR, nextElement(aButton[i]));
//鼠標(biāo)移入
aButton[i].onmouseover = function ()
{
addClass(this, "WellButtonH");
addClass(prevElement(this), "ButtonLH");
addClass(nextElement(this), "ButtonRH");
};
//鼠標(biāo)移出
aButton[i].onmouseout = function ()
{
removeClass(this, "WellButtonH");
removeClass(prevElement(this), "ButtonLH");
removeClass(nextElement(this), "ButtonRH");
}
}
/* 下拉菜單 */
for (i = 0; i < aSelect.length; i++)
{
var oFragment = document.createDocumentFragment();
var oSelectL = document.createElement("div");
var oSelectR = document.createElement("div");
var oWellSelect = document.createElement("div");
var oEm = document.createElement("em");
var oUl = document.createElement("ul");
oSelectL.className = "SelectL";
oSelectR.className = "SelectR";
oWellSelect.className = "WellSelect";
//插入結(jié)構(gòu)
aSelect[i].parentNode.insertBefore(oSelectL, aSelect[i]);
aSelect[i].parentNode.insertBefore(oSelectR, nextElement(aSelect[i]));
oUl.style.width = oWellSelect.style.width = aSelect[i].offsetWidth - oSelectR.offsetWidth / 2 + "px";
for (var j = 0; j < aSelect[i].options.length; j++)
{
var oLi = document.createElement("li");
oLi.innerHTML = aSelect[i].options[j].text;
oLi["sValue"] = aSelect[i].options[j].value;
oFragment.appendChild(oLi);
aSelect[i].options[j].selected && (oEm.innerHTML = aSelect[i].options[j].text)
}
oUl.appendChild(oFragment);
oWellSelect.appendChild(oEm);
oWellSelect.appendChild(oUl);
aSelect[i].parentNode.insertBefore(oWellSelect, aSelect[i]);
oWellSelect.appendChild(aSelect[i]);
oWellSelect.onclick = oSelectR.onclick = function (event)
{
var o = this.getElementsByTagName("ul")[0] || prevElement(this).getElementsByTagName("ul")[0];
var aUl = form.getElementsByTagName("ul");
this.parentNode.style.position = "relative";
this.parentNode.style.zIndex = zIndex++;
o.style.display = o.style.display == "block" ? "none" : "block";
for (i = 0; i < aUl.length; i++)
{
if (o == aUl[i]) continue;
aUl[i].style.display = "none";
}
var aLi = o.getElementsByTagName("li");
for (i = 0; i < aLi.length; i++)
{
aLi[i].onmouseover = function ()
{
this.className = "hover"
};
aLi[i].onmouseout = function ()
{
this.className = ""
};
aLi[i].onclick = function ()
{
prevElement(this.parentNode).innerHTML = this.innerHTML;
nextElement(this.parentNode).value = this.sValue
}
}
(event || window.event).cancelBubble = true;
document.onclick = function ()
{
o.style.display = "none"
}
}
}
}
</script>
</head>
<body>
<form>
<div class="item"><label>姓名：</label><input type="text" name="name" /></div>
<div class="item"><label>電話：</label><input type="text" name="tel" /></div>
<div class="item">
<label>性別：</label>
<select name="sex">
<option value="男孩">男孩</option>
<option value="女孩" selected="selected">女孩</option>
<option value="人妖">人妖</option>
</select>
</div>
<div class="item">
<label>生日：</label>
<select name="month">
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7" selected="selected">7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
</select>
<select name="day">
<option value="1">1號</option>
<option value="2">2號</option>
<option value="3">3號</option>
<option value="4">4號</option>
<option value="5">5號</option>
<option value="6" selected="selected">6號</option>
<option value="7">7號</option>
<option value="8">8號</option>
<option value="9">9號</option>
<option value="10">10號</option>
<option value="11">11號</option>
<option value="12">12號</option>
<option value="13">13號</option>
<option value="14">14號</option>
<option value="15">15號</option>
<option value="16">16號</option>
</select>
<select name="year">
<option value="2000">2000年</option>
<option value="2001">2001年</option>
<option value="2002">2002年</option>
<option value="2003">2003年</option>
<option value="2004">2004年</option>
<option value="2005">2005年</option>
<option value="2006">2006年</option>
<option value="2007">2007年</option>
<option value="2008">2008年</option>
<option value="2009">2009年</option>
<option value="2010" selected="selected">2010年</option>
<option value="2011">2011年</option>
<option value="2012">2012年</option>
<option value="2013">2013年</option>
</select>
</div>
<div class="item">
<label>婚姻：</label>
<input type="radio" name="marry" value="已婚" /><pre>已婚</pre>
<input type="radio" name="marry" value="未婚" checked="checked" /><pre>未婚</pre>
</div>
<div class="item">
<label>愛好：</label>
<input type="checkbox" name="like" value="吃飯" /><pre>吃飯</pre>
<input type="checkbox" name="like" value="睡覺" /><pre>睡覺</pre>
<input type="checkbox" name="like" value="上網(wǎng)" checked="checked" /><pre>上網(wǎng)</pre>
<input type="checkbox" name="like" value="打游戲" checked="checked" /><pre>打游戲</pre>
</div>
<div class="item"><label>地址：</label><input type="text" style="width:300px;" name="address" /></div>
<div class="item"><label>備注：</label><textarea cols="50" rows="5" style="width:300px;" name="remark"></textarea></div>
<div class="item"><label>說明：</label><textarea cols="50" rows="5" style="width:300px;" name="desc"></textarea></div>
<div class="item"><label></label><input type="submit" value="提交" /></div>
</form>
<form>
<div class="item"><label>用戶名：</label><input type="text" name="username" /></div>
<div class="item"><label>密碼：</label><input type="password" name="pwd" /></div>
<div class="item"><label>驗(yàn)證碼：</label><input type="text" name="code" style="width:60px;" /></div>
<div class="item"><label></label><input type="submit" value="提交" /></div>
</form>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了webpack css加載和圖片加載的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
JS實(shí)現(xiàn)數(shù)組去重復(fù)值的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組去重復(fù)值的方法,結(jié)合實(shí)例形式分析了JS通過數(shù)組遍歷、運(yùn)算等方法實(shí)現(xiàn)去重復(fù)值的操作技巧,需要的朋友可以參考下2017-02-02
javascript高級程序設(shè)計(jì)第二版第十二章事件要點(diǎn)總結(jié)(常用的跨瀏覽器檢測方法)
javascript高級程序設(shè)計(jì)第二版第十二章事件要點(diǎn)總結(jié)(常用的跨瀏覽器檢測方法),需要的朋友可以參考下2012-08-08
Js獲取下拉框選定項(xiàng)的值和文本的實(shí)現(xiàn)代碼
本篇文章主要是對Js獲取下拉框選定項(xiàng)的值和文本的實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
滑動錨點(diǎn)挺有意思的,可增加一些瀏覽性,下面這篇文章主要給大家介紹了關(guān)于js錨點(diǎn)、操作滾動條滑動scroll的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
今天繼續(xù)學(xué)習(xí)JS中的對象，昨天學(xué)完了本地對象中的兩個(gè)重要對象Array和Date。今天看下內(nèi)置對象Global對象和Math對象。2009-12-12
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)畫板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript純前端實(shí)現(xiàn)在線GIF壓縮
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript純前端實(shí)現(xiàn)在線GIF壓縮工具,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章主要介紹了關(guān)于在 JavaScript 中如何讓 this 保持正確的指向的解決方案,文中給大家介紹了三種解決方案,使用閉包,使用箭頭函數(shù)和換綁 this這三種方法,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-01-01
JavaScript 快捷鍵設(shè)置實(shí)現(xiàn)代碼
屏蔽Alt+F4等快捷鍵 IE Javascript快捷鍵操作2009-03-03