<!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界面。然而在实际应用中，开发者可能会遇到一些布局...
本教程将深入探讨如何使用jQuery来创建一个具有选中效果的input下拉菜单，这是一种常见的交互设计，能提升用户体验。 首先，我们要明白jQuery是如何工作的。jQuery通过选择器（Selector）来选取DOM元素，然后对这些...
蓝光特效则通常是指在用户聚焦或激活input输入框时，为输入框添加的一种视觉效果，使得交互更加吸引人，提升用户体验。在JavaScript（js）中实现这种特效，我们可以利用CSS样式和JavaScript事件监听来完成。 首先，...
在本教程中，我们将深入探讨如何利用jQuery来实现一个搜索输入框的功能，当用户在input框中输入关键词时，能自动筛选并显示与之匹配的相关信息。 首先，我们需要在HTML中设置一个input元素作为搜索框，并且定义一个...