`

文本框提示样式，鼠标点击获得焦点时提示内容消失

XHTMLHTML 
阅读更多
<!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>文本框提示样式</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.getElementById(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>
分享到：
| 在BS系统中使用模态对话框(showModalDialog ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    文本框 css 样式

    文本框提示样式，鼠标点击获得焦点时提示内容消失 input文本框样式 只有下划线的文本框： 软件序列号式的输入框： 软件序列号式的输入框(完整版)： 输入框景背景透明： 鼠标划过输入框，输入框背景色变色： ...

    文本框取鼠标事件文本框取鼠标事件

    - **onfocus 事件处理**：当文本框获得焦点时，如果文本框的值等于预设值（例如：“ƾ֤:”），则将文本框清空，以便用户可以输入内容。 - **onblur 事件处理**：当文本框失去焦点时，检查文本框是否为空；如果是...

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

    通过以上步骤，我们就实现了ASP.NET后台控制文本框提示文字的功能，使得提示文字在鼠标点击时消失，鼠标离开后重新出现，且提示文字为灰色，输入文本时为黑色字体。这种方法不仅提高了用户体验，而且代码结构清晰，...

    文本框提示插件

    文本框提示插件是一种常见的前端交互元素，它用于在用户在文本框中输入内容时提供相关的建议或自动完成选项。这种插件广泛应用于各种Web应用，如搜索引擎、表单填写等，可以提升用户体验，减少输入错误，提高输入...

    超级好看的文本框样式

    8. **伪类选择器（Pseudo-classes）**：例如`:hover`、`:focus`和`:active`，可以改变鼠标悬停、获取焦点和被激活时的样式。 9. **自定义占位符（Placeholder）**：`::placeholder`伪元素可以更改输入框占位符的...

    js文本框输入内容智能提示效果

    `onblur`事件绑定在文本框上，当文本框失去焦点时（例如用户点击别处），`lost`函数会执行，隐藏提示内容。 这个示例展示了基本的前端交互逻辑和AJAX通信，对于初学者来说是很好的学习资源。在实际应用中，可能...

    气泡提示与文本框绑定事件与缓存

    气泡提示，又称为工具提示或浮动提示，是一种用户界面设计技术，它会在鼠标悬停在某个元素上时显示相关信息，通常用于提供额外的上下文帮助或简短的说明。这种设计可以帮助用户快速了解不明显或复杂的控件功能，而...

    js显示文本框提示文字的方法

    紧接着，我们通过JavaScript脚本来实现当用户点击文本框时，提示文字消失，并且文本框获得焦点的样式变化。当文本框失去焦点且用户未输入任何信息时，提示文字则会重新出现，并且文本框的样式恢复到默认状态。 具体...

    好看的文本框和按钮样式

    在探讨“好看的文本框和按钮样式”的主题时，我们不仅关注功能性和实用性，还强调设计美学，以提升用户界面的吸引力。以下是从给定文件中提取的关键知识点，深入解析了如何通过HTML、CSS和JavaScript来创造既美观又...

    点击输入框默认文字消失效果

    这是一种更高级的技术实现，它可以在用户点击输入框时移除默认提示信息，使得用户能够直接输入自己的内容。 #### 实现步骤 1. **事件监听**：使用`onFocus`事件来监听输入框获得焦点的情况。 2. **条件判断**：检查...

    HTML文本框样式

    - **onfocus/onblur**：获得或失去焦点时触发的事件处理函数。 #### `&lt;textarea&gt;`标签的关键属性 - **name**：与`&lt;input&gt;`相同，定义字段名称。 - **rows**：定义文本区域的高度（以行数为单位）。 - **cols**：...

    鼠标焦点离开文本框时验证的js代码

    本文所关注的是一个特定场景——在用户填写完毕并试图离开一个文本框（例如，通过鼠标点击其他地方或使用Tab键切换焦点）时，对文本框中的数据进行验证。 在给出的示例代码中，我们使用了HTML和JavaScript结合的...

    HTML5实现又一个联系人表单文本框响应鼠标事件效果(无js).zip

    除了这些基本的伪类，HTML5还引入了`placeholder`属性，它可以为输入框提供提示文字，当用户点击文本框后，这些提示文字会消失，让用户知道应该输入什么内容。例如： ```html 请输入姓名"&gt; ``` 总的来说，这个项目...

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

    `onfocus`事件在文本框获得焦点（即用户点击文本框时）触发，`onblur`事件则在失去焦点时触发。在`onfocus`事件中，我们检查文本框的值是否等于默认提示文字，如果是，则清空内容并保持灰色样式。相应的JavaScript...

    vb 透明背景文本框

    在实际应用中，你可能还需要处理其他细节，如文本框的焦点状态、边框样式以及文本框内部文本的绘制等。这可能需要更复杂的自定义绘图逻辑。例如，你可能需要重写`OnMouseDown`, `OnMouseUp`等事件来正确处理鼠标操作...

    HTML5 INPUT文本框点击高亮特效.rar

    在这个代码片段中，`:hover`伪类用于在鼠标悬停时改变边框颜色，`:focus`伪类则在输入框获取焦点（即被点击）时应用高亮效果。`transition`属性使得颜色和阴影的变化过程更加自然。 在实际项目中，为了保持代码的...

    文本框(input)获取焦点(onfocus)时样式改变的示例代码

    摘要：许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果。其实很简单，我们只需要获取页面上的文本框，加上onfocus事件或者其他对应的事件即可。本文介绍了如何在获取焦点时...

    css+jquery美化文本框，选择框

    4. **伪类选择器**：利用`:hover`, `:focus`, `:active`等伪类选择器，实现鼠标悬停、获得焦点和按下时的不同状态样式。 5. **自定义placeholder样式**：可以使用`::placeholder`伪元素改变占位符的样式。 **...

    CSS3文本框动画输入标签效果.zip

    在"CSS3文本框动画输入标签效果"中，jQuery用于监听用户对输入框的交互，比如鼠标点击或获得焦点，然后触发相应的CSS3动画。 具体实现过程如下： 1. **初始状态**：输入框的上方显示一个标签文本，例如"用户名"，...

Magicbox
Global site tag (gtag.js) - Google Analytics