1，文本框提示样式，鼠标点击获得焦点时提示内容消失
复制代码 代码示例:
<!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=gb2312" />
<title>文本框提示样式 - www.yuju100.com</title>
<style type="text/css">
<!--
.a1 {
color: #CCCCCC;
}
.a2 {
color: #000;
}
-->
</style>
</head>
<body>
<input name="n" type="text"/>
<input name="n1" type="text"/>
<script language="
javascript">
window.onload=function(){
s('n','Your message1');s('n1','Your message2')
}
function g(a){return document.getElementByIdx_x(a)}
function s(n,v){
with(g(n)){
className='a1';value=v;
onfocus=function(){if(value==v)value='';className='a2'}
onblur=function(){if(value==''){value=v;className='a1'}}
}
}
</script>
</body>
</html>
2，input文本框样式
复制代码 代码示例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>input文本框样式代码 - www.jb200.com</title>
<style>
<!--
.username { width:130px; background:#FFFFFF url("/article/upimages/ico_username.gif") 2px 2px no-repeat; padding-
left:18px;BORDER-RIGHT: #E7AD01 1px solid; BORDER-TOP: #E7AD01 1px solid; FONT-SIZE: 13px; BORDER-LEFT: #E7AD01
1px solid; COLOR: #000000; BORDER-BOTTOM: #E7AD01 1px solid; HEIGHT: 20px }
-->
</style>
</head>
<body>
<table cellSpacing="0" cellPadding="0" width="100%" border="0" id="table1">
<tr>
<form name="myform" method="post" action="">
<td class="login_td">用户名：<input class="username"
onmouseover="this.style.borderColor='#99E300'" onmouseout="this.style.borderColor='#A1BCA3'" maxLength="12"
name="UserName"></td>
</form>
</tr>
</table>
</body>
</html>
3，鼠标一上去变成浅绿色
复制代码 代码示例:
<html>
<head>
<title>css-文本框样式 - www.jb200.com</title>
<style type="text/css">
<!--
.box1,.box2 { width:144px; height:22px;
line-height:22px; border:1px solid #A9BAC9;background:url
(/bg_box1.gif) no-repeat #fff; padding:0 3px; font-size:12px; }
.box2 { border:1px solid #9ECC00;}
-->
</style>
</head>
<body>
<INPUT class=box1 id=login
onmouseover="this.className='box2'" onMouseOut="this.className='box1'"
name=login>
</body>
</html>
4，只有下划线的文本框：
复制代码 代码示例:
<input style="border:0;border-bottom:1 solid black;background:;">
软件序列号式的输入框：
<script for="T" event="onkeyup">
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3">
软件序列号式的输入框(完整版)：
<script for="T" event="onkeyup">if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();</script>
<script for="T" event="onfocus">select();</script>
<script for="Submit" event="onclick">
var sn=new Array();
for(i=0;i<T.length;i++)
sn=T.value;
alert(sn.join("—"));
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">
<input type="submit" name="Submit">
输入框景背景透明：
复制代码 代码示例:
<input style="background:transparent;border:1px solid #ffffff">
鼠标划过输入框，输入框背景色变色：
<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width: 106; height: 21"
onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">
输入字时输入框边框闪烁(边框为小方型)：
复制代码 代码示例:
<Script Language="JavaScript">
function borderColor(){
if(self['oText'].style.borderColor=='red'){
self['oText'].style.borderColor = 'yellow';
}else{
self['oText'].style.borderColor = 'red';
}
oTime = setTimeout('borderColor()',400);
}
</Script>
<input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">
输入字时输入框边框闪烁(边框为虚线)：
复制代码 代码示例:
<style>
#oText{border:1px dotted #ff0000;ryo:expression_r(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
</style>
<input type="text" id="oText">
自动横向廷伸的输入框：
复制代码 代码示例:
<input type="text" style="huerreson:expression_r(this.width=this.scrollWidth)" value="abcdefghijk">
自动向下廷伸的文本框：
复制代码 代码示例:
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>
<!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">...
<!--
.keyword {...}{width:150px; height:20px; border:#0066FF 1px solid;}
#keytishi {...}{width:150px; height:auto; border:#0066FF 1px solid; position:absolute; display:none;}
#keytishi ul {...}{ margin:0;}
#keytishi ul li{...}{margin:0;list-style-type:none; line-height:16px; height:16px; font-size:12px; padding:2px;}
#keytishi ul li a {...}{display:block; width:150px; height:16px; text-decoration:none;}
#keytishi ul li a:hover {...}{background-color:#0099FF;}
-->
</style>
<script type="text/javascript">...
<!-- www.jb200.com
//建立XMLHttpRequest对象
var xmlhttp;
try...{
xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e)...{
try...{
xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}catch(e)...{
try...{
xmlhttp= new XMLHttpRequest();
}catch(e)...{}
}
}
function getKeyWord()...{
var obj = document.getElementById("search");//获取文本域对象
if(obj.value=="")...{
return;
}
var top=0;
var left=0;
while(obj)...{//此循环得到文件域对象在页面中的绝对位置
top += obj["offsetTop"];
left += obj["offsetLeft"];
objobj = obj.offsetParent;
}
xmlhttp.open("get","input.asp?keyword="+document.getElementByIdx_x("search").value,true);
xmlhttp.onreadystatechange = function()...{
if(xmlhttp.readyState == 4)
{
if(xmlhttp.status == 200)
{
if(xmlhttp.responseText!="")...{
document.getElementByIdx_x("keytishi").innerHTML = (xmlhttp.responseText);//把后台返回的数据填充到提示层
document.getElementByIdx_x("keytishi").style.left = left + "px";//设置提示层的位置,左
document.getElementByIdx_x("keytishi").style.top = (top + 25) + "px";//设置提示层的位置,上
document.getElementByIdx_x("keytishi").style.display = "block";//设置提示层可见
}else...{
document.getElementByIdx_x("keytishi").innerHTML = "";//清空提示层
document.getElementByIdx_x("keytishi").style.display = "none";//设置提示层不可见
}
}
else...{
}
}
}
xmlhttp.setRequestHeader("If-Modified-Since","0");
xmlhttp.send(null);
}
function input(str)...{
document.getElementByIdx_x("search").value=str;//从提示层选择你需要的数据填充到文本框
document.getElementByIdx_x("keytishi").innerHTML = "";//清空提示层
document.getElementByIdx_x("keytishi").style.display = "none";//设置提示层不可见
}
//-->
</script>
</head>
<body>
<input type="text" class="keyword" id="search" name="search" onkeyup="getKeyWord();" onclick="getKeyWord();" />
<div id="keytishi"></div><!--提示层-->
</body>
</html>
后台文件 [input.asp]
复制代码 代码示例:
<%...@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="conn.asp"-->
<%...
dim rs
dim sql
dim keyWords
keyWrods = Request("keyword")
Set rs = Server.CreateObject("ADODB.Recordset")
sql = "select * from king_test where keyword like '%"&keyWrods&"%'"
rs.open sql,conn,1,1
if not (rs.bof and rs.eof) then
Response.Write("<ul>")
do while not rs.eof
%>
<li><a href="javascript:void(null);" onclick="input('<%Response.Write(escape(rs("keyword")))%>');"><%...Response.Write(escape(rs("keyword")))%></a></li>
<%...
rs.movenext
loop
Response.Write("<ul>")
end if
rs.close
set rs = nothing
conn.close
Set conn = nothing
%>
.buttoncss {
font-family: "tahoma", "宋体";
font-size:9pt; color: #003399;
border: 1px #003399 solid;
color:#006699;
border-bottom: #93bee2 1px solid;
border-left: #93bee2 1px solid;
border-right: #93bee2 1px solid;
border-top: #93bee2 1px solid;
background-image:url(../images/bluebuttonbg.gif);
background-color: #e8f4ff;
cursor: hand;
font-style: normal ;
width:60px;
height:22px;
}
