网页上默认的文本框老是灰色风格，看的都有点不耐烦了，用CSS和JS改变其样式是大家都喜欢用的方法，今天写了一个点击边框变色的文本框，鼠标点击文本框将要输入的时候，文本框自动变色高亮显示，非常有视觉效果，让文本框变漂亮了许多。HTML代码如下：
<!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="textml; charset=utf-8" />
<title>输入框点击时边框变色效果</title>
</head>
<body>
<script type="text/javascript">
// focusClass : 获取焦点时的样式
// normalClass : 正常状态下的样式
function focusInput(focusClass, normalClass) {
var elements = document.getElementsByTagName("input");
for (var i=0; i < elements.length; i++) {
if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") {
elements[i].onfocus = function() { this.className = focusClass; };
elements[i].onblur = function() { this.className = normalClass||''; };
}
}
}
</script>
<script type="text/javascript">
window.onload = function () {
focusInput('focusInput', 'normalInput');
}
</script>
请输入姓名：<input type="text" class="normalInput" />
<style type="text/css">
.normalInput {border:1px solid #ccc;}
.focusInput {border:1px solid #FFD42C;}
</style>
</body>
</html>
在火狐下也有效，只不过火狐和chrome下，这两款浏览器默认会自动会输入框添加点击效果，所以有时候看不清，IE下表现突出。前端框架示例
相关推荐
本资源包提供了一个解决方案，它包含三个JavaScript文件和一个HTML文件，用于在前端实现C#关键字变色以及输入时的关键字提示功能，非常适合在线编译器或代码编辑器的开发。 首先，我们要理解C#是一种面向对象的编程...
文本框获得焦点时变色,html,javascript,css,用作表单比较不错
文本框获得焦点改变背景颜色，HTML，JAVASCRIPT,CSS，做网页前台的时候看一看
为了更好地理解上述知识点的应用，我们可以设想一个简单的场景：当用户将鼠标悬停在不同的选项上时，对应的选项字体变为加粗，并将选中的值填充到文本框中。 ```html (1)">Option 1 (2)">Option 2 (3)">Option 3 (4...
鼠标经过文本框变色示例 <!-- 在这里放置你的文本框 --> 请输入内容..."> 请输入内容..."> ... <script src="script.js"> ``` 通过这种方式，我们可以轻松地为网页中的文本框添加动态变色效果，提高...
10. **表单逻辑控制**：通过JS脚本，可以在用户填写表单的过程中实现一系列逻辑控制，如联动选择、条件跳转等，增强表单的智能化。 通过学习和应用这些泛微表单JS大全中的脚本，开发者可以创建出功能丰富、用户体验...
当达到最大值时，加号按钮会被禁用，并且文本框背景色会变色。 通过以上步骤，我们就完成了使用 jQuery 实现文本框数量加减的功能。这个功能可以方便地应用于电子商务网站或其他需要动态调整数量的场合，为用户提供...
不仅如此，它还提供了输入时的动态反馈，如鼠标悬停、焦点状态、验证错误时的样式变化，这些细节处理提升了用户在填写表单时的感知体验。 其次，下拉框（select）的美化也是`niceforms.js`的一大亮点。它将传统的...
在编程和用户界面设计中，控件获得焦点时变色是一种常见的交互设计策略，用于提高用户体验和可操作性。这个主题主要涉及到计算机图形学、人机交互和编程语言中的事件处理机制。以下是对这一知识点的详细说明： 1. *...
经过研究发现无法在原生的loading中插入客制化文本框，因为自己写的js优先级低于portal自带的，所以采用手动触发批量编辑的功能，实现如下： 1. 在subgrid List中插入一个按钮，点击后触发批量编辑功能 2. 点击后...
在IT领域，尤其是在软件开发和用户界面设计中，"多字体变色"是一个常见的需求，它涉及到了文本处理、颜色管理以及用户交互体验等多个方面。本文将深入探讨这个主题，帮助你理解如何实现这一功能。 首先，我们来解析...
在 HTML 和 CSS 中，我们可以使用各种样式和脚本来美化文本框和输入框的外观和行为。下面我们将详细介绍七种不同的文本框样式和输入框效果。 1. 只有下划线的文本框 使用 CSS 样式可以轻松地创建只有下划线的...
本文将深入探讨如何使用JavaScript（js）实现鼠标悬停在地图热点区域时突出显示的效果，并基于提供的文件`test.html`、`pic_map.js`和`map.png`进行讲解。 首先，`test.html`是HTML文件，它是网页的基础结构。在`...
在本篇介绍中，我们将深入探讨使用javascript实现的几种特殊文本输入框网页特效。 首先，我们来学习如何让文本框只带有下划线。这个效果可以通过javascript脚本来实现，通过获取到文本框的DOM元素，并对其样式进行...
JavaScript（简称JS）是网页的动态脚本语言，能实现与用户的交互，验证输入数据，以及提供其他高级功能。在这个登录页面中，JavaScript可以做到： 1. 表单验证：检查用户名和密码是否为空，密码是否符合复杂性要求...
3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字...
JavaScript，简称为JS，是一种广泛应用于网页和网络应用开发的轻量级编程语言，尤其在前端开发中占有重要地位。JS常用于实现网页的交互效果，包括动态内容更新、用户界面交互以及表单验证等。在给定的文档中，我们...
3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字...
在本文中，我们将深入探讨如何使用jQuery、Ajax和文本框实现智能提示功能，这是一个常见的交互设计，用于提高用户输入效率，比如在搜索框中提供自动补全建议。首先，我们来解析一下各个部分： 1. **HTML结构**： ...