当前位置:编程学习 > html/css >>

仿新浪微博输入效果 文本框

作者:aolinks

<!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>
</head>

<style type="text/css">
.class{color:#ccc;}
.class_1{color:#000;}
</style>
<script language="javascript">
function $$(obj)
{
    return document.getElementById(obj);
}
var str_Tag="来这里写俩句吧";
function on()
{
if($$('ly').value=='' || $$('ly').value==str_Tag)
{
    $$('ly').innerText="";
    $$('ly').className="class";
}

}
function off()
{
if($$('ly').value=='')
{
    $$('ly').innerText=str_Tag;
    $$('ly').className="class";
}
else
$$('ly').className="class_1";
}

</script>
<body>
<textarea name="ly" id="ly" cols="" rows=""  onfocus="on();"   onchange="off();" class="class">来这里写俩句吧</textarea>
<input id="txtpws" type="text" class="class" onfocus="if(this.value=='来这里写俩句吧') {this.value='';this.className='class'}" onblur="if(!this.value){this.value='来这里写俩句吧';this.className='class';}" onkeydown="this.className='class_1';" value="来这里写俩句吧" style="width:200px;margin-top:5px;" size="28">
</body>
</html>

补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,