像百度和CSDN这里的点击文本框 ,改变边框的 功能是怎么做的??

lxy_lxy 2011-06-01 03:13:57
像百度和CSDN这里的点击文本框 ,改变边框颜色的 功能是怎么做的
...全文
270 17 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
xieliliang 2011-06-22
  • 打赏
  • 举报
回复
[Quote=引用 15 楼 lxy_lxy 的回复:]
我指的是像 百度 和csdn 那样的边框颜色变化 ,这个蓝色 ,这个蓝色 是有点渐变的蓝色 ,而不是js直接改变边框颜色这么简单的吧~~~????
[/Quote]
可以用背景图片平铺
ycproc 2011-06-22
  • 打赏
  • 举报
回复

输入框景背景透明:
<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(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(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>

只有下划线的文本框:
<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">
lxy_lxy 2011-06-22
  • 打赏
  • 举报
回复
我指的是像 百度 和csdn 那样的边框颜色变化 ,这个蓝色 ,这个蓝色 是有点渐变的蓝色 ,而不是js直接改变边框颜色这么简单的吧~~~????
格桑花 2011-06-04
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 taomanman 的回复:]
C# code

可以在页面中加入javascript如下:
<script type="text/javascript" language="javascript">
function changeborder()
{
document.getElementById('txtAccount').style.borderColor……
[/Quote]

+++++++
saviorgaga 2011-06-04
  • 打赏
  • 举报
回复
学习,,,关注
jjhong 2011-06-04
  • 打赏
  • 举报
回复
没分发帖 急待解决 借用一下 先谢谢了 请高手帮解决一下

<img src=... 这样的调用方式的计数器,如何才能实现来路获取功能?script 这种调用方式的计数器,实现来路获取,是很容易的,可以用一句js来实现,但<img这样的调用方式,js不能运行,只能直接是输入图像的代码。
这时用Request.ServerVariables("HTTP_REFERER")取到的,只是计数器所在的网页的网址,如何才能获取到计数器所在的网页的来源地址呢?问题补充:

比如在看 http://www.ddd.com/ 时转到了看 http://www.abc.com/index.html 页,这页里用 <img src="xxx.asp" /> 引用了计数器,那么在xxx.asp中的HTTP_REFERER就是 http://www.abc.com/index.html,这并不是期望的 http://www.ddd.com,要的就是得到 http://www.ddd.com.
kk297173176 2011-06-04
  • 打赏
  • 举报
回复
好吧 接个分 可以吧
begintransaction 2011-06-04
  • 打赏
  • 举报
回复

.c
{
border:solid 1px #ccc;
}
.u
{
border:solid 1px red;
}


<input type="text" onclick="javascript:this.className='c'" onblue="javascript:this.className='u'"/>
  • 打赏
  • 举报
回复
1楼的够可以解决了。
lxy_lxy 2011-06-04
  • 打赏
  • 举报
回复
[Quote=引用 5 楼 fengyarongaa 的回复:]
万能的css和 html5 jquery
[/Quote]

如何实现~~
xiaolingwei 2011-06-01
  • 打赏
  • 举报
回复


<script type="text/javascript" language="javascript">
function changeborder()
{
document.getElementById('<%=txtAccount.ClientID%>').style.borderColor="Red";
}
</script>

然后在textbox中加入onfocus

<asp:TextBox ID="txtAccount" runat="server" Width="132px" onfocus="changeborder();"></asp:TextBox>


这样才可以
josephSC 2011-06-01
  • 打赏
  • 举报
回复
不错,一楼代码都给出来了。 btw我也很喜欢jquery很强大
ycproc 2011-06-01
  • 打赏
  • 举报
回复
万能的css和 html5 jquery
sharpblade 2011-06-01
  • 打赏
  • 举报
回复
通过css,容易的很
子夜__ 2011-06-01
  • 打赏
  • 举报
回复
你那是谷歌浏览器吧?
zell419 2011-06-01
  • 打赏
  • 举报
回复
<input type="text" onfocus="this.style.border='10px solid #dedede'" />
这样 ?
暖枫无敌 2011-06-01
  • 打赏
  • 举报
回复

可以在页面中加入javascript如下:
<script type="text/javascript" language="javascript">
function changeborder()
{
document.getElementById('txtAccount').style.borderColor="Red";
}
</script>
然后在textbox中加入onfocus,如下:
<asp:TextBox ID="txtAccount" runat="server" Width="132px" onfocus="changeborder();"></asp:TextBox>
这里是把border的颜色改成了red,你自己也可以随便修改。

如果是失去焦点的话,可以使用onblur事件
onblur="changeborderback();"
javascript函数添加
function changeborderback()
{
document.getElementById('txtAccount').style.borderColor="White"
}

<asp:TextBox ID="txtAccount" runat="server" Width="132px" onfocus="changeborderback();"></asp:TextBox>
400个插件,下面的详细列表: mxp/ColdFusion中的Include mxp/80多个国家的一个下拉菜单,在某些时候的确挺方便的 mxp/检查当前文件的兼容性和可能包含的错误,并会给出详细的检测报告 mxp/在代码编辑框中选择一段脚本代码,然后使用这个插件,可以把这些代码放到一个单独的js文件中 mxp/在Dreamweaver中快速的插入一个Fireworks好的图片,不过好象只能空白图 :( mxp/这个插件用来代替Dreamweaver File菜单下的New Form Template命令。作用是可以侦测出站点内的模板,这样就直接打开了,而不象以前还需要在对话框中选择 mxp/在代码编辑环境下,插入一个脚本函数,函数名和参数都可以自定义的 mxp/这个插件很有意思,让你的窗口从大变小,或者从小变大 mxp/用来更新Configuration-TagAttributeList.txt这个文件 mxp/插入中文空格 mxp/Jet制作的飘浮图片插件,没时间封装,Redidea友情封装 mxp/Chromeless Windows标题bug修改版 mxp/使窗口过一段时间后自动关闭 mxp/用来电子商务的插件。不过只停留在表面的html语句和form的action,没有涉及后台程序 mxp/替换Dreamweaver自带的show-hide layer behavior,从而使更好的支持Netscape 6 mxp/用来代替Dreamweaver自带的Set Text of Layer behavior,从而使得在Netscape 6下兼容 mxp/打开一个新窗口,并让窗口在屏幕上居中 mxp/Chromeless Windows,比我的X-window好。 mxp/可以联合Authorware, CourseBuilder extension for Dreamweaver ,UltraDev, Macromedia Flash Learning Extensions, and Director等等的一系列软件一个教学站点 mxp/对当前文件生成一个备份文件,以便修改 mxp/在site窗口的文件上点一下右键就出现这个插件了。作用是把文件复制或者移动到某个文件夹 mxp/层的转换特效,2.0版 mxp/加入JSP中的Include mxp/用表单外部的事件来提交表单 mxp/用表单外部的事件来控制表单的行为,包括提交,清空等等 mxp/可以对文本框中的内容多种限制,比如不包含空格、引号等等 mxp/在Dreamweaver的File菜单下加一个Print code命令,用来打印代码 mxp/Splash Window,也叫chromeless splash , 一种效果很不错的浏览器窗口 mxp/在代码编辑窗的点右键,可以快速跳转到特定的代码行 mxp/在site窗口中的本地文件夹选择一个文件点右键,就可以打开当前文件所在的目录,很方便的 mxp/在代码编辑框中点右键就可使用。该插件可以让插件编写者用一些Windows风格的对话框来和用户进行交互 mxp/创建一个JustSo风格的相册 mxp/插件开发者使用,用来Debug mxp/Dreamweaver中的Menu.xml是记录Dreamweaver菜单信息的文件,由于某些原因,经常容易损坏,此插件可以创建备份文件并恢复 mxp/打开一个Web对话框窗口,也是很特别的一种,没有最大和最小化按钮 mxp/使一个多行的表格行和行之间颜色交替,像斑马线一样。2.0版本 mxp/可以倒出-倒入站点信息,方便其他开发者 mxp/插入e-Vue MPEG-4格式的文件 mxp/Mycomputer.com提供的一套Banner交换系统,使用起来需要注册,比较麻烦 mxp/MyComputer.com提供的一套站点访问跟踪系统,也是需要注册,使用麻烦 mxp/在页面中加入一个SiteMiner.com搜索引擎的接口,MyComputer.com提供 mxp/在页面中加入一个MyComputer.com提供的留言本,需要注册,使用麻烦 mxp/计算代码的字符个数 mxp/一个比Dreamweaver自带的Jump menu更好的下拉导航菜单 mxp/对Dreamweaver目录下的FtpExtensionsMap.txt文件进行编辑。此文件定义了某类型的文件以二进制或者文本方式ftp mxp/自动将窗口最大化 mxp/由MyComputer.com提供的一套投票程序,需要注册,使用烦琐 mxp/用来在Dreamweaver环境下编辑安装目录下的Extensions.txt文件,此文件记录的文件扩展名和文件类型的关系 mxp/加入一个指向邮件地址的连接,并可以自定

62,244

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧