<!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>Input文字输入效果</title>
<style type="text/css">
input{ width:200px; height:24px; line-height:24px; border:1px solid #999; background:#ccc; margin:15px 0 0 100px; padding:4px; color:#666;}
.current{ background:#E0FEE4; border:1px solid #093;}
</style>
</head>
<body>
<input name="" type="text" value="请输入姓名："/><br />
<input name="" type="text" value="请输入昵称："/><br />
<input name="" type="text" value="输入验证码："/><br />
<input name="" type="text" value="请输入手机号码："/><br />
<input name="" type="text" value="请输入电子邮件："/>
<script type="text/javascript">
var aInp=document.getElementsByTagName('input');
var i=0;
var sArray=[];
for(i=0; i<aInp.length; i++)
{
aInp[i].index=i;
sArray.push(aInp[i].value);
aInp[i].onfocus=function()
{
if(sArray[this.index]==aInp[this.index].value)
{
aInp[this.index].value='';
}
aInp[this.index].className='current';
};
aInp[i].onblur=function()
{
if(aInp[this.index].value=='')
{
aInp[this.index].value=sArray[this.index];
}
aInp[this.index].className='';
};
}
</script>
</body>
</html>
- 大小: 13.6 KB
分享到：
相关推荐
jquery插件maskedinput实现掩码文本输入框(masked input效果).zip
CSS3输入文字input文本框动画效果
十四种不同类型的input字段文字输入效果
输入框input样式，各种效果齐全
js、web、input放大镜，能够实现很好的用户提现效果，是前端开发人员在input中使用的一个很好的demo！值得保存
点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。 演示地址：https://codepen.io/MichaelArestad/full/ohLIa HTML 代码： <p>Click every input. <input ...
jquery实现input搜索输入关键词后自动筛选相关信息效果
本文实例讲述了js实现input框文字动态变换显示效果。分享给大家供大家参考。具体如下： 这里演示js实现INPUT框中的特殊显示效果，一些文字慢慢交替显示，最终显示出完整的文字，需要显示的文字预先保存在数组中，...
数字放大镜input输入数字放大镜效果代码
input 结合div实现 select效果
14种CSS3炫酷表单input输入框美化效果
一款简单的input输入框删除文字效果js代码，仿百度点击删除搜索框输入文字代码。
jquery input下拉菜单选中效果是一款基于jquery实现的模拟select下拉菜单选中效果代码。
图片美化Select下拉框及Input文本框效果，select新样式，使用了htc文件，因此在兼容性方面，仅支持IE内核的浏览器，火狐、傲游可能有些问题。本美化效果包括3个表单元素： 1、select下拉按钮的新样式 2、文本框...
自定义input的placeholder属性为pro,细节自己看源码，源码不多，容易理解
插件需求： IE11 在Input框内添加一个“X”，用来点击清除用户输入的数据，个人觉挺好用的，但是其它浏览器不会出现， 特进行插件扩展，实现所有...样式应该在Bootstrap的样式后面引用，以免被样式覆盖，而没有效果！
水印 插件 jquery插件 很好用 不过要注意 jquery的版本 和这个插件的版本 匹配 最好用官方的 最新的版本
jquery tag插件input文本域输入文字创建标签文字效果
这是一组效果非常精美的时尚input元素滑块UI设计效果。这组滑块共4种不同的效果，它们使用CSS3来渲染样式，使用JavaScript来处理滑块的鼠标拖动事件。