`

文本框默认输入灰色显示,点击后用层显示提示信息

 
阅读更多
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
/*姓名格式提示信息*/
#passengerNameDiv,
.passengerNameDiv{
position:absolute;
display:none;
}
#passengerNameIframe,
.passengerNameIframe{
position:absolute;
width:168px;
height:48px;
}
#passengerNameNoticeDiv,
.passengerNameNoticeDiv{
position:absolute;
width:168px;
padding:2px 2px;
border:1px solid #7F9DB9;
background:#FFFFFF;
z-index:2;
}
#passengerNameNoticeDiv ul,
.passengerNameNoticeDiv ul{
clear:both;
margin:0pt;
padding:0pt;
}
#passengerNameNoticeDiv ul li,
.passengerNameNoticeDiv ul li{
margin:0pt;
padding:0pt;
float:left;
width:100%;
text-align:left;
font-size:12px;
color:#C0C0C0;
line-height:20px;
}
</style>
</head>
<script language="javascript" type="text/javascript">

function focusPassengerName(textObj){
    var textDefault = '所选证件姓名';
      if (textObj.value == textDefault){
          textObj.value = '';
      }
      textObj.style.color="black";
      var posi = getPositionByObj(textObj);
      showHotAirCitys(posi.left,posi.top);
}

function blurPassengerName(textObj){
    var textDefault = '所选证件姓名';
      if (textObj.value == ''){
          textObj.value = textDefault;
          textObj.style.color="gray";
      }else if(textObj.value == textDefault){
      textObj.style.color="gray";
      }else{
      textObj.style.color="black";
      }
      hideHotAirCitys();
}
function showHotAirCitys(left,top){
document.getElementById("passengerNameDiv").style.left = left+'px' ;
document.getElementById("passengerNameDiv").style.top = top+'px' ;
document.getElementById("passengerNameDiv").style.display= "block";
}
function hideHotAirCitys(){
document.getElementById("passengerNameDiv").style.display= "none";
}
function getPositionByObj(e){
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while(e=e.offsetParent){
t += e.offsetTop;
l += e.offsetLeft;
}
t += h;
return {top: t,left: l,width: w,height: h}
}

</script>
<body>
<input type="text" name="eeeee" /><br>
<input type="text" name="eeeee" /><input type="text" id="test" onfocus="focusPassengerName(this)" onblur="blurPassengerName(this)" value="所选证件姓名" style="color:gray;" /><br/><br/><br/>

<!--姓名格式提示信息  -->
<div id="passengerNameDiv" class="passengerNameDiv">
<IFRAME id="passengerNameIframe" class="passengerNameIframe"></IFRAME>
<div id="passengerNameNoticeDiv" class="passengerNameNoticeDiv">
<ul>
<li>中文姓名&nbsp;&nbsp;中文字符</li>
<li>英文姓名&nbsp;&nbsp;last/frist middle</li>
</ul>
</div>
</div>
</body>
</html>
分享到:
评论

相关推荐

    C#文本框灰色默认值的设置

    这一操作确保了当用户开始输入时,文本将以黑色显示,清晰可辨,与默认的灰色提示信息形成对比。 ### 实现细节 - **事件绑定**:在窗体的设计阶段,需要确保`textBox2_Click`和`Form1_Load`事件与相应的控件正确...

    文本框 默认值 灰色 方法 网络 浏览器

    在网页设计和开发中,创建具有默认灰色文本的文本框是一种常见的需求,这通常用于提供提示信息或预填充用户可能需要输入的数据。标题和描述提到的"文本框默认值灰色方法"涉及到使用JavaScript库jQuery来实现这一效果...

    给文本框添加灰色提示文字

    另一种是使用label标签与输入框层叠显示提示文字,类似点点网的做法,这样即便JavaScript代码没有生效,用户仍然可以看到提示信息,并在掩码输入框中输入密码。 在设计登录页面时,如果确实需要针对密码输入框提供...

    asp.net后台实现文本框提示文字

    在ASP.NET开发中,我们经常需要为用户界面提供友好的提示信息,比如在文本框(TextBox)中显示默认的提示文字。这样的功能可以提高用户体验,因为它在用户输入前提供了清晰的指引。本篇文章将深入探讨如何在ASP.NET...

    常用input文本框内容自动垂直居中并默认提示文字单击为空

    "`使得初始显示的“请输入企业名称”文本颜色为灰色,这样用户可以清楚地识别出这是提示信息而不是已输入的内容。 第三,单击后清空提示文字和恢复灰色提示,这部分功能是通过JavaScript实现的。`onfocus`事件在...

    jQuery文本框字符限制插件-TextArea Counter.pdf

    - `maxlength`默认设置为140,`speed`设置为15,提示信息样式默认为Arial字体、小号灰色文字,剩余字数为加粗斜体的大号灰色文字。 - 当用户按下键盘时,如果当前输入长度已达最大值且非Backspace或Delete键,将...

    输入框灰色提示字体效果

    在HTML5中,`&lt;input&gt;`标签引入了一个新的属性——`placeholder`,用于在输入框内显示默认的提示信息。然而,这个特性在早期版本的Internet Explorer(IE)浏览器中并不支持,这给开发者带来了兼容性问题。为了确保在...

    JS文本框默认值处理详解

    总结来说,上述代码片段展示了如何通过JavaScript来处理文本框的默认值,它使用了`focus`和`blur`事件来决定何时重置和显示默认文本。这对于构建具有动态交互能力的网页界面非常重要,使得用户在使用表单时能够获得...

    搜索文本框焦点离开时文本位置跳动问题解决方法

    当用户点击搜索文本框,开始输入文字后,再移开光标时,文本框内部的光标可能会导致文本位置发生轻微的偏移,有时甚至会使文本框的内容出现不稳定的跳动现象。这通常是由浏览器默认的焦点样式或CSS样式引起的。解决...

    编辑框置提示文本-易语言

    在易语言中,编辑框不仅可以用来接收单行或多行文本输入,还可以通过特定方法设置提示文本,即在用户尚未输入任何内容时显示一段灰色的文字,提供操作指南或者默认建议。这种功能在许多应用程序中都有应用,如登录...

    一个看起来比较舒服值得学习的文本框样式

    文本框(Text Box)是网页设计中不可或缺的元素,它用于收集用户输入的信息。本话题主要探讨一个设计得较为舒适的文本框样式的实现方法。这个样式的关键在于其黄色背景的运用,以及整体的视觉效果和交互体验的优化。...

    Excel VBA实用技巧大全 附书源码

    04153设定、删除单元格的输入规则和信息提示(有效性设置) 04154为单元格设置条件格式、删除条件格式 04155为单元格插入指向工作簿内部的超链接、删除超链接 04156为单元格插入指向工作簿外部的超链接、删除超链接 ...

    腾讯网Web页面设计规范

    限定标签提示置于搜索框上方,热门关键词提示放于下方,标示性文字以灰色显示,点击后消失。 - 搜索按钮:通常有图标形式(放大镜)和文字形式,可搭配使用。文字应简洁明了,如“搜索”,避免使用“请输入关键词”...

    delphi控件

    例如,你可以将“确定”、“取消”等命令性词语设置为按钮的 `Caption`,以便用户理解点击按钮后将发生的操作。 **Cancel 属性**:通过将此属性设置为 `True`,可以使按钮成为默认的取消按钮。这意味着,当用户按下...

    腾讯网Web设计规范_V1.3.ppt

    帮助信息包括限定标签提示、标示性文字、热门关键词提示等,其中标示性文字可以设置灰色(#cccccc)显示,点击输入框后提示文字消失。 应用场景方面,搜索框可以根据不同的应用场景进行设计,例如强表现方式和弱...

    jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码

    为了提高用户体验,经常会在表单的输入框(`input`元素)内预设提示性文字,这些文字在用户未输入时显示,一旦用户聚焦输入框开始输入,提示文字应自动消失。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作和...

    zendstudio自定义快捷键和其svn设置[定义].pdf

    将鼠标悬停在“Unlock”上,会显示一个小提示框,点击`No key bindings`。 6. 在`Binding`后面的文本框中,按下你希望设定的快捷键组合,例如`Ctrl+Shift+L`,然后点击“OK”。 你可以用同样的方法自定义其他SVN...

    禁止修改IPNoIPSet

    如果执行成功,将显示提示信息。  注意:命令中的regsvr32与Netcfgx.dll之间,Netcfgx.dll与/u之间,均需用空格间隔开。  2.将Netcfgx.dll换成Netshell. dll和Netman.dll重复执行即可。  以后,无论是单击“网上...

Global site tag (gtag.js) - Google Analytics