问题

linyifei2239 2012-04-11 11:05:48
如何在已有的<asp:textbox>里面添加一个效果 让鼠标点击文本框的时候 里面的提示信息变成灰色斜体 然后当输入的时候 提示信息消失 求代码 注意是要在<asp:textbox>里面添加 不要Input里面添加的代码！各路高手速来！谢谢!
...全文
402 26 打赏 收藏 转发到动态 举报
写回复
用AI写文章
26 条回复
切换为时间正序
请发表友善的回复…
发表回复
少多慢快 2012-04-12
  • 打赏
  • 举报
 回复
这个用JS就可以实现了，楼上已经有很多种方法了。
yyl8781697 2012-04-12
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 的回复:]

引用 1 楼 的回复:

我觉得这样好点吧:

文本框默认显示提示信息(灰色字体)，
获得focus的时候变成空字符串,字体变成正常的。
lose focus的时候.
如果用户输入了，保持用户输入的东西，
如果用户没有输入，变成提示信息(灰色字体)


但是我这里的客户需求要是 先是黑色字体的提示信息 然后点击后变灰色斜体 再输入才消失 求教 谢谢
[/Quote]
你另一帖子里面我帮你回过了，看了这个之后再给以补充一些，你设置你textbox的class名称就可以了，代码如下


<!DOCTYPE html>

<html>

<head>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    	$(function(){

				$(".title").focus(function(){

								if($(this).val()==$(this)[0].defaultValue)

									$(this).css({color:"#ccc",fontStyle:"italic"});

						})

				$(".title").keydown(function(){

					if($(this).val()==$(this)[0].defaultValue)

						$(this).val("");

					$(this).css({color:"#333",fontStyle:"normal"});

				})

		})

    </script>

</head>

<body>

	<input type="text" class="title" value="请输入标题" />

</body>

</html>
悲伤龙吟 2012-04-12
  • 打赏
  • 举报
 回复
[Quote=引用 20 楼 的回复:]
引用 19 楼 的回复:

你可以根据不同的textbox的name值不一样来判断其提示信息
function ChangeStyle(obj)
{
obj.style.fontStyle ="italic";
obj.style.color="Gray";
switch(obj.name)
{
case:"textbox的name……

name值 那不是Input那种类型……
[/Quote]
id也是一样的 obj.name换成obj.id就是了
我想有个浪漫小屋 2012-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 的回复:]
引用 5 楼 的回复:

JScript code

function ChangeStyle(obj)
{
obj.style.fontStyle ="italic";
obj.style.color="Gray";

obj.value="你的提示信息";
}
function CL……

那个obj啥意思啊？

[/Quote]
obj是你传入的参数，在这里表示的是被选中的TextBox
我想有个浪漫小屋 2012-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 的回复:]
用javascript应该不难。

找到一个库,基于Jquery:
Watermark Input Plugin
http://digitalbush.com/projects/watermark-input-plugin/

如果不用Jquery的话，看看这篇文章:
text input watermarks using javascript (ie compatible)
ht……
[/Quote]
+1
红烧半人马 2012-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 的回复:]
我新手
[/Quote]

onclick="ChangeStyle(this)" 和 onkeydown="CLear(this)" 需要添加这两个事件，事件中传入的参数是 this 就是你点击的这个对象，通俗说就是那个 <asp:TextBox>
龙儿 2012-04-11
  • 打赏
  • 举报
 回复
function ChangeStyle(obj)
{
obj.style.fontStyle ="italic";
obj.style.color="Gray";

obj.value="你的提示信息";
}
function CLear(obj)
{
if(obj.value=="你的提示信息")
{
obj.value="";
}
}
linyifei2239 2012-04-11
  • 打赏
  • 举报
 回复
我新手
linyifei2239 2012-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 的回复:]

JScript code

function ChangeStyle(obj)
{
obj.style.fontStyle ="italic";
obj.style.color="Gray";

obj.value="你的提示信息";
}
function CL……
[/Quote]
那个obj啥意思啊？
红烧半人马 2012-04-11
  • 打赏
  • 举报
 回复 


        function ChangeStyle(obj)

      {

         obj.style.fontStyle ="italic";   

         obj.style.color="Gray";

           

         obj.value="你的提示信息";

      }

      function CLear(obj)

      {   

        if(obj.value=="你的提示信息")      

        {          

          obj.value="";          

        }

      }

是不是这样？
linyifei2239 2012-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]

我觉得这样好点吧:

文本框默认显示提示信息(灰色字体)，
获得focus的时候变成空字符串,字体变成正常的。
lose focus的时候.
如果用户输入了，保持用户输入的东西，
如果用户没有输入，变成提示信息(灰色字体)
[/Quote]

但是我这里的客户需求要是 先是黑色字体的提示信息 然后点击后变灰色斜体 再输入才消失 求教 谢谢
宝_爸 2012-04-11
  • 打赏
  • 举报
 回复
用javascript应该不难。

找到一个库,基于Jquery:
Watermark Input Plugin
http://digitalbush.com/projects/watermark-input-plugin/

如果不用Jquery的话，看看这篇文章:
text input watermarks using javascript (ie compatible)
http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-%28IE-Compatible%29.aspx

这种效果叫做WaterMark.
红烧半人马 2012-04-11
  • 打赏
  • 举报
 回复
直接添加 onclick="ChangeStyle(this)" 和 onkeydown="CLear(this)" 事件
宝_爸 2012-04-11
  • 打赏
  • 举报
 回复
我觉得这样好点吧:

文本框默认显示提示信息(灰色字体)，
获得focus的时候变成空字符串,字体变成正常的。
lose focus的时候.
如果用户输入了，保持用户输入的东西，
如果用户没有输入，变成提示信息(灰色字体)
zly229190 2012-04-11
  • 打赏
  • 举报
 回复
设置Id，用Js代码进行控制就好了。
chen_ya_ping 2012-04-11
  • 打赏
  • 举报
 回复
https://github.com/danielstocks/jQuery-Placeholder
这个应该符合楼主的要求，可以下载下来，看看他的demo
chen_ya_ping 2012-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 的回复:]

引用 15 楼 的回复:

注意 添加时间的时候 需要传入参数 this
onclick="ChangeStyle(this)" 和 onkeydown="CLear(this)" 需要添加这两个事件，事件中传入的参数是 this 就是你点击的这个对象，通俗说就是那个 <asp:TextBox>

然后把之前我贴上的脚本加上 肯定不会出错，你再检查检查。

还有一点，不要在母版……
[/Quote]
可以使用jquery在ready的时候选择符合条件的textbox，一起附加事件
jquery的选择器是非常强大的。
linyifei2239 2012-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 19 楼 的回复:]

你可以根据不同的textbox的name值不一样来判断其提示信息
function ChangeStyle(obj)
{
obj.style.fontStyle ="italic";
obj.style.color="Gray";
switch(obj.name)
{
case:"textbox的name……
[/Quote]
name值 那不是Input那种类型的text框 我现在是<asp:textbox>的 没有name属性啊
悲伤龙吟 2012-04-11
  • 打赏
  • 举报
 回复
你可以根据不同的textbox的name值不一样来判断其提示信息
function ChangeStyle(obj)
{
obj.style.fontStyle ="italic";
obj.style.color="Gray";
switch(obj.name)
{
case:"textbox的name值":
obj.value="你的提示信息"; break;
case:"textbox的name值":
obj.value="你的提示信息"; break;
...
}
}
function CLear(obj)
{
if(obj.value=="你的提示信息1"||obj.value=="你的提示信息2")
{
obj.value="";
}
}

如果你的提示信息的长度不长的话 可以作为参数直接传进去 。。。
linyifei2239 2012-04-11
  • 打赏
  • 举报
 回复
我是在维护项目 原来的都是<asp:textbox> 全部改input的话 工作量太大了....
加载更多回复（6）
javascrip上百技术总集
JavaScript极速狂飙：组合拼接字符串的效率JavaScript极速狂飙：CSS样式表的背景渲染效率JavaScript面向对象的支持--(1)JavaScript面向对象的支持--(2)JavaScript面向对象的支持--(3)JavaScript面向对象的支持--(4)JavaScript面向对象的支持--(5)JavaScript面向对象的支持--(6)JavaScript精简学习1：基础知识JavaScript精简学习2：浏览器输出JavaScript精简学习3：图像JavaScript精简学习4：表单事半功倍之Javascript--(1)事半功倍之Javascript--(2)事半功倍之Javascript--(3)事半功倍之Javascript--(4)JavaScript教程--从入门到精通--(1)JavaScript教程--从入门到精通--(2)JavaScript教程--从入门到精通--(3)JavaScript教程--从入门到精通--(5)JavaScript教程--从入门到精通--(6)JavaScript教程--从入门到精通--(7)JavaScript教程--从入门到精通--(8)JavaScript教程--从入门到精通--(9)悟透JavaScript（李站老师）-编程的快乐悟透JavaScript（李站老师）-初看原型悟透JavaScript（李站老师）-对象素描悟透JavaScript（李站老师）-放下对象悟透JavaScript（李站老师）-构造对象悟透JavaScript（李站老师）-原型扩展用javascript操作 asp .net TextBox控件用javascript操作 asp .net Label控件用javascript操作 asp .net TextBox控件 下用javascript操作asp.net label控件 外一篇用javascript改变onclick调用的函数用JavaScript加密保护网站页面用Javascript检测网速的方法用Javascript评估用户输入密码的强度用JavaScript实现仿Windows关机效果用javascript实现进度条用javascript怎样实现图片模糊效果《ExtJS2.0实用简明教程》之Border区域布局《ExtJS2.0实用简明教程》之Ext类库简介《ExtJS2.0实用简明教程》之布局概述《ExtJS2.0实用简明教程》之获得ExtJS《ExtJS2.0实用简明教程》之应用ExtJSjs访问xml之遍历节点树js访问xml之创建xmlDocumentjs访问xml之根节点操作js访问xml之节点操作(1)js访问xml之节点操作(2) js访问xml之节点对象属性和方法js访问xml之删除一个book元素节点js访问xml之添加一个book元素节点【JS】兼容ff的加入收藏和设为首页【补】【sina】绕过sina博客的限制，超级BT执行Javascript【blog】介绍一下给sina博客加背景音乐的办法【Blog】再次解说博客加音乐的办法张孝祥JavaScript教程笔记：HTML基础张孝祥JavaScript教程笔记：HTML基础（二）张孝祥JavaScript教程笔记：HTML基础（三）－URL,图像标签，图像地图JavaScript经典效果集锦（一）JavaScript经典效果集锦（二）JavaScript经典效果集锦（三）Javascript技术技巧大全（一）Javascript技术技巧大全（二）Javascript技术技巧大全（三）Javascript技术技巧大全（四）Javascript技术技巧大全（五）JavaScript[对象.属性]集锦之一
<asp:TextBox><asp:LinkButton>调用后台方法后刷新页面
<asp:TextBox><asp:LinkButton>服务器控件，执行后台方法，会回调加载js，相当于页面重新加载，刷新页面 <input button>不能直接调用后台方法 所以可以用ajax解决 <asp:TextBox><asp:LinkButton>服务器控件 OnClientClick="test();ret...
对比和<asp:TextBox runat="server" ID="">
首先这两个都是对应文本输入框形式： input type="text"class="form-control"id="txt_add_pro_help_username"value="aaa"/> asp:TextBox runat="server"CssClass="form-control"ID="txt_add_pro_help_username"/>     1）这两个在形式上是
<asp:TextBox..>与区别
与区别 在研究suggestbox控件时，若是使用， 则调用 $("#txt_account").suggestboxSeller();无法成功，应改成 $("#").suggestboxSeller(); 是服务器控件 是客户端控件 在服务器端运行的控件在客户端显示的ＩＤ是不可预测的，要用其ＩＤ写写clicentid才可以。 最终还是解析为 HTML 在页面的生命周期的最
与<asp:button>的区别,以及runat="server"的作用
与的区别,以及runat="server"的作用 在中只能编写点击事件onclick，并且只能在js中实现，那么如何让像一样可以在后台实现呢 为添加runat="server" 并且添加onserverclick="Unnamed_ServerClick"点击事件，并在后台编写它的点击效果，这样就会跟效果一样。 前台代码：      服务器控件的意思是在里页面上建立了普通HTML标签或AS
.NET社区

62,268

社区成员

668,981

社区内容

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

加载中

查看更多榜单
社区公告

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

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

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

+ 用AI写文章