Html5带来了 placeholder
<input id="t1" type="text" placeholder="请输入文字" />
轻松实现 简单不...但是扩展性比较差 而且ie等浏览器支持不是很完善 而且各主流浏览器支持效果不是很统一
所以还是jquery/js 比较实用...简单实现起来也不是很复杂 并且统一性比较强大
<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#focus .input_txt").each(function(){
var thisVal=$(this).val();
//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
if(thisVal!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
//聚焦型输入框验证
$(this).focus(function(){
$(this).siblings("span").hide();
}).blur(function(){
var val=$(this).val();
if(val!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
});
})
$("#keydown .input_txt").each(function(){
var thisVal=$(this).val();
//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
if(thisVal!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
$(this).keyup(function(){
var val=$(this).val();
$(this).siblings("span").hide();
}).blur(function(){
var val=$(this).val();
if(val!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
})
})
})
</script>
<style type="text/css">
form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;}
label{display:block;height:40px;position:relative;margin:20px 0;}
span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}
.input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;}
.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}
.border_radius{border-radius:5px;color:#B00000;}
h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;}
</style>
</head>
<body>
<form class="border_radius" id="focus">
<h2>聚焦型提示语消失</h2>
<label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius" /></label>
<label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
</form>
<form class="border_radius" id="keydown">
<h2>输入型提示语消失</h2>
<label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius" /></label>
<label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
</form>
<p><script type="text/javascript" src="http://d.lanrentuku.com/goto/js-preview-728x90.js"></script></p>
</body>
</html>
- 大小: 22.7 KB
分享到：
相关推荐
分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。 演示地址：...
综上所述，`js-input输入框提示语`是前端开发中的基本需求，通过HTML的`placeholder`属性结合JavaScript的动态操作，可以实现丰富的提示语功能，提高用户交互体验。在实际开发中，还需要考虑到兼容性和用户体验，...
首先，我们需要一个HTML结构来初始化一个基础的input输入框和一个“添加”按钮。HTML部分可能如下所示： ```html <input type="text" id="inputField" placeholder="请输入信息"> 添加 ``` 接着，我们需要用...
这篇文章我们来看看什么是input输入框背景文字提示效果，如下图所示： 这种效果现在网上非常的普遍流行，但大部分是使用JavaScript实现的。但HTML5给我们提供了新的纯HTML的实现方式，不需要任何的JavaScript，只...
以下是一个完整的HTML页面示例，展示了如何使用`<input>`标签和`placeholder`属性创建带提示信息的输入框，并通过JavaScript验证用户输入： ```html <!DOCTYPE html> <html> input:-webkit-input-placeholder { ...
在网页设计中，"带图标的input输入框"是一个常见的交互元素，它通过结合图标与文本输入框，提升用户界面的美观度和易用性。这样的设计可以使用户更直观地理解输入框的目的，例如，一个搜索图标常用于搜索框，锁型...
在网页设计中，输入框（`<input>`）的占位符（`placeholder`）属性是一种非常实用的功能，它可以在用户输入前提供提示文本。HTML5引入了这一原生属性，使得开发者能够轻松地在输入框中添加提示信息。默认情况下，...
`placeholder`属性用于在输入框`<input>`内显示提示文字，帮助用户了解输入字段应该填写什么样的内容。在现代浏览器中，`placeholder`属性被广泛支持，但在较旧版本的IE（主要是IE9及以下）中并不支持。 为了解决这...
HTML5中input输入框默认提示文字向左向右移动首先演示input输入框代码 <style> * { margin: 0; padding: 0; } .sousuo { width: 458px; height: 34px; margin-left: 190px; margin-top: 200px; ...
为了提供更好的用户体验，许多网站会添加一些交互特效，例如本例中的"input输入框删除文字效果js代码"。这个特效使得用户在输入框中输入文字后，可以通过点击一个可操作的图标或按钮来轻松清除已输入的内容，类似...
在您提供的场景中，标题描述了一个带有`placeholder`功能的输入框，其默认显示的提示文字是“请输入密码”。这种设计常见于密码输入框，确保用户在输入时知道他们应该输入什么类型的数据。同时，为了增强安全性，...
在上述代码中，我们创建了一个文本类型的输入框，并通过`id`属性为它分配了一个唯一标识符，`placeholder`属性则设置了输入框的提示文字。 接下来，我们可以通过CSS来定制输入框的样式。这包括但不限于边框、填充、...
在"input输入框获取js点击文字内容.zip"这个压缩包中，我们可以预见到包含了一个简单的HTML页面（index.html），该页面可能实现了通过JavaScript来获取用户在输入框中输入的文字内容的功能。下面将详细介绍HTML5的`...
HTML5 配合 CSS3 实现带提示文字的输入框（摆脱 JS） HTML5 中的 placeholder 属性可以用来实现输入框的提示文字，而 CSS3 的动画效果和伪类可以使输入框更加美观。 下面将详细讲解如何使用 HTML5 和 CSS3 实现带...
本主题将探讨如何利用HTML5和CSS3来实现一个带提示文字的输入框，这是一个常见的表单元素，能够为用户提供友好的交互体验。 首先，我们从HTML5的基本结构开始。在HTML5中，`<input>`标签用于创建各种类型的输入字段...
这段代码会遍历页面上的所有`<input>`元素，如果找到带有`placeholder`属性的输入框，就会添加相应的`onfocus`和`onblur`事件处理函数，从而实现与`placeholder`类似的功能。 在火狐和谷歌等支持`placeholder`属性...
本文将深入探讨如何利用CSS3来实现14种不同的表单input输入框美化效果。 首先，CSS3的伪类选择器是实现输入框美化的核心工具。例如，`:hover`用于鼠标悬停时的效果，`:focus`则表示输入框获取焦点时的状态，`:...
在网页设计中，`<input>` 的 `placeholder` 属性是一个非常实用的功能，它允许用户在输入框中看到一个提示文本，通常用于说明输入框预期接收的数据类型或格式。然而，这个特性在早期的 Internet Explorer 版本，尤其...