<!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"主要关注的是jQuery的一个扩展插件——jQuery Masked Input Plugin，它允许用户按照特定格式输入数据，例如电话号码、日期或信用卡号，从而...
这个话题“十四种不同类型的input字段文字输入效果”将深入探讨`<input>`标签的不同类型及其在用户交互中的作用。下面我们将详细讲解这些不同的输入类型及其特性。 1. **text**：这是最基础的输入类型，允许用户...
描述中提到的"数字放大镜input输入数字放大镜效果代码"进一步强调了这个代码是专门针对输入框（input元素）设计的，当用户在input元素中输入数字时，会有一个类似放大镜的效果，将用户聚焦的数字放大显示，从而提高...
"input输入放大镜的js效果"是一个旨在提升输入体验的JavaScript技术应用，它允许用户在输入时对文本进行实时预览和放大，从而提高输入的准确性和便捷性。这种效果常见于电子商务网站的产品搜索框或者任何需要精确...
在网页设计中，"input触发弹出层，实现select效果"是一种常见的交互设计技术，它旨在提供一个更友好、更具可定制性的用户体验。通常，原生的HTML `select` 元素虽然功能齐全，但其样式和交互方式往往受到浏览器默认...
为了提供更好的用户体验，许多网站会添加一些交互特效，例如本例中的"input输入框删除文字效果js代码"。这个特效使得用户在输入框中输入文字后，可以通过点击一个可操作的图标或按钮来轻松清除已输入的内容，类似...
"水印效果的 input"是指在输入框（input）中实现一种类似于提示文本的功能，这种文本会在用户聚焦输入框时消失，非聚焦时显示，就像一张水印一样。这种效果常用于指导用户如何填写表单，提供输入示例或者要求，比如...
"CSS3输入文字input文本框动画效果"是利用CSS3特性来增强用户界面的一个典型例子，它可以提升用户体验，使表单元素如输入框(input)更具吸引力和互动性。 首先，我们要了解`input`元素是HTML中的一个基本表单控件，...
本资源"输入框input样式，各种效果齐全"提供了一系列输入框样式的实例，旨在帮助开发者创建更加丰富多样的用户界面。 首先，我们要理解HTML中的`<input>`标签，它是创建输入框的基础。`<input>`标签是HTML的表单...
本文实例讲述了js实现input框文字动态变换显示效果。分享给大家供大家参考。具体如下： 这里演示js实现INPUT框中的特殊显示效果，一些文字慢慢交替显示，最终显示出完整的文字，需要显示的文字预先保存在数组中，...
### 关于 INPUT type=file 的样式 在Web开发中，`<input type="file">` 元素...总之，虽然 `<input type="file">` 的样式定制受到一定限制，但通过巧妙的设计和技术手段，仍然能够实现较为满意的视觉效果和用户体验。
点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。 演示地址：https://codepen.io/MichaelArestad/full/ohLIa HTML 代码： <p>Click every input. <input ...
本资源“14种CSS3炫酷表单input输入框美化效果”正是围绕这一主题展开，旨在帮助开发者创造出更具吸引力和交互性的表单界面。 1. **边框动画效果**：通过CSS3的`border-radius`属性，可以创建圆角输入框，增强视觉...
在IT行业中，jQuery Tag...以上就是关于"jquery tag插件input文本域输入文字创建标签文字效果"的主要知识点。通过理解这些概念和实践技巧，开发者可以轻松地在自己的项目中实现类似的功能，提升用户与界面的交互体验。
具体实现可能需要创建一个力反馈效果对象，设置其参数（如强度、持续时间等），然后发送到手柄设备。 6. **轮询输入**: 游戏通常需要实时更新输入状态，因此我们需要在一个循环中定期调用`GetDeviceState`，以获取...
解决layui的input独占一行的问题涉及了Web前端开发中的布局和CSS样式设置。layui是一个前端UI框架，它提供了一套简单易用的CSS和JS组件，被广泛应用于快速开发Web界面。然而在实际应用中，开发者可能会遇到一些布局...
Input XSS，全称为Input-Based Cross-Site Scripting，是一种常见的Web安全漏洞，允许攻击者通过在输入字段中注入恶意脚本来操纵用户浏览器的行为。这种漏洞通常发生在网站未能正确过滤或转义用户提供的数据，导致...
本教程将深入探讨如何使用jQuery来创建一个具有选中效果的input下拉菜单，这是一种常见的交互设计，能提升用户体验。 首先，我们要明白jQuery是如何工作的。jQuery通过选择器（Selector）来选取DOM元素，然后对这些...
蓝光特效则通常是指在用户聚焦或激活input输入框时，为输入框添加的一种视觉效果，使得交互更加吸引人，提升用户体验。在JavaScript（js）中实现这种特效，我们可以利用CSS样式和JavaScript事件监听来完成。 首先，...