创建一个输入框和一个按钮。当输入框获得焦点时，背景颜色变为黄色；有内容变绿色。点击按钮时，获取输入框中的值并在控制台输出

时间: 2024-09-20 10:12:10 浏览: 36

好看的文本框和按钮样式

在探讨“好看的文本框和按钮样式”的主题时，我们不仅关注功能性和实用性，还强调设计美学，以提升用户界面的吸引力。以下是从给定文件中提取的关键知识点，深入解析了如何通过HTML、CSS和JavaScript来创造既美观又实用的文本框和按钮样式。 ### 知识点一：自定义文本框边框 #### 样式代码： ```html <input style="border:0; border-bottom:1px solid black; background:;"> ``` #### 解析：这段代码展示了如何创建一个仅有底部边框的文本框，同时去除了其他三条边框，实现了简约而不失风格的设计。`border:0`消除了默认的边框，而`border-bottom:1px solid black`仅保留了底部边线，黑色实线增加了文本框的可见度。`background:`属性虽然未指定值，默认为透明或白色，保持了简洁的背景效果。 ### 知识点二：数字输入限制与动态聚焦 #### 样式代码： ```html <script for="T" event="onkeyup">if(value.length==3) document.all[event.srcElement.sourceIndex+1].select();</script> ``` ```html <input name="T" size="5" maxlength="3"> ``` #### 解析：此代码段实现了对输入长度的限制，并在达到特定长度后自动将焦点移至下一个输入框。`maxlength="3"`确保每个输入框最多只能输入三位数字，`size="5"`设定了输入框的宽度，使其看起来更整洁。结合`onkeyup`事件，当输入达到三个字符时，代码会自动选中（或聚焦）下一个输入框，便于用户连续输入多个数字，常用于电话号码或密码输入场景。 ### 知识点三：数组处理与提交验证 #### 样式代码： ```javascript <script for="Submit" event="onclick"> var sn = new Array(); for (i = 0; i < T.length; i++) { sn[T.value] = i; } alert(sn.join("")); </script> ``` #### 解析：这段JavaScript代码展示了如何在用户点击提交按钮时，收集所有名为“T”的输入框中的值并存储到数组中，最后通过`alert()`函数显示所有输入值的字符串。`sn[T.value] = i;`语句中存在语法错误，正确的写法应是`sn[i] = T[i].value;`。修改后的代码可以正确地遍历所有输入框并将值存储到数组中。 ### 知识点四：透明背景文本框 #### 样式代码： ```html <input style="background:transparent; border:1px solid #ffffff"> ``` #### 解析：通过设置`background:transparent`和`border:1px solid #ffffff`，可以创建一个具有白色边框且背景完全透明的文本框。这种设计特别适合于需要文本框融入复杂背景的情况，既能突出文本框边界，又不会破坏整体视觉效果。 ### 知识点五：颜色变化的文本框 #### 样式代码： ```html <INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black'; this.style.backgroundColor='plum'" onmouseout="this.style.borderColor='black'; this.style.backgroundColor='#ffffff'" style="width:106; height:21; border-width:1px; border-color=black"> ``` #### 解析：这段代码通过`onmouseover`和`onmouseout`事件，实现了鼠标悬停时文本框边框颜色和背景色的变化。当鼠标悬停在文本框上时，边框颜色变为黑色，背景色变为淡紫色（plum），离开时则恢复原状。这种动态效果增强了用户交互体验，使界面更加生动有趣。 ### 知识点六：定时闪烁的文本框边框（小范围） #### 样式代码： ```javascript function borderColor() { if (self['oText'].style.borderColor == 'red') { self['oText'].style.borderColor = 'yellow'; } else { self['oText'].style.borderColor = 'red'; } oTime = setTimeout('borderColor()', 400); } ``` #### 解析：这段JavaScript代码实现了一个定时器，当文本框获得焦点时，其边框颜色会在红色和黄色之间交替变化，营造出闪烁的效果。`setTimeout`函数每400毫秒执行一次`borderColor()`函数，实现颜色切换，`onfocus="borderColor(this);"`和`onblur="clearTimeout(oTime);"`分别在获取和失去焦点时启动和停止定时器。 ### 知识点七：定时闪烁的文本框边框（大范围） #### 样式代码： ```css #oText {border:1px dotted #ff0000; ryo:expression(onfocus=function light() { with (document.all.oText) { style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00"); timer=setTimeout(light, 500); }}, onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})} ``` #### 解析：这段代码通过CSS表达式实现了一种更复杂的闪烁效果。当文本框获得焦点时，边框颜色会在红色（#ff0000）和金黄色（#ffee00）之间快速切换，增强了视觉冲击力。`ryo:expression`属性虽然在某些情况下被视为非标准用法，但在IE浏览器中可以实现动态效果。`onfocus`和`onblur`事件分别负责启动和停止定时器，确保闪烁效果只在文本框被激活时进行。通过以上分析，我们可以看到，利用HTML、CSS和JavaScript，设计师和开发者能够创造出各种既美观又功能强大的文本框和按钮样式，从而极大地提升用户体验和界面的吸引力。这些技巧不仅适用于网页设计，也可以扩展应用到各类基于Web的应用程序中，为用户提供更加个性化和高效的交互环境。

你可以通过HTML、CSS以及JavaScript来实现这样的功能。首先，创建基本的HTML结构： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .active-input { background-color: yellow; } .has-content { background-color: green; } </style> </head> <body> <input type="text" id="myInput" onfocus="inputFocus()" onkeyup="checkContent()"> <button onclick="outputValue()">获取并输出</button> <script src="script.js"></script> </body> </html> ``` 然后在外部的`script.js`文件中编写JavaScript代码： ```javascript window.onload = function () { // 初始化聚焦状态 inputFocus(); }; function inputFocus() { const inputBox = document.getElementById('myInput'); if (inputBox.value !== '') { inputBox.classList.add('has-content'); } else { inputBox.classList.remove('has-content'); } } function checkContent() { const inputBox = document.getElementById('myInput'); if (inputBox.value !== '') { inputBox.classList.add('active-input'); } else { inputBox.classList.remove('active-input'); } } function outputValue() { const inputValue = document.getElementById('myInput').value; console.log('输入框中的值:', inputValue); } ``` 在这个例子中，当输入框聚焦(`onfocus`)时，会检查是否有内容，如果有则添加`has-content`样式变为绿色。而当输入内容变化(`onkeyup`)时，还会判断是否聚焦并且如果聚焦就添加`active-input`样式变成黄色。最后，点击按钮时，`outputValue`函数会被调用，将输入框的值输出到浏览器的开发者工具的控制台。

阅读全文

创建一个输入框和一个按钮。当输入框获得焦点时，背景颜色变为黄色；有内容变绿色。点击按钮时，获取输入框中的值并在控制台输出

相关推荐

200多个js技巧代码

好看的JS表单样式大全.docx

css 设置点击按钮获取焦点或者焦点在该div的时候显示 否则不显示

Android编程基础笔试题和答案

web开发常用200个JS代码_Web开发_Java快速开发_.net快速开发

"JS和HTML部分代码集：文本框焦点、按钮颜色特殊处理示例

JavaScript技巧集锦：文本框焦点、按钮样式与窗口控制

精选200个jsp脚本：常用JS代码集合

【无人机通信】基于matlab最佳高度和功率中继无人机通信位置部署【Matlab仿真 4834期】.zip

数字签名验签的MbedTLS代码实现Demo

【信息融合】基于matlab卡尔曼滤波KF有反馈信息融合【含Matlab源码 9101期】.mp4

Zoom：Zoom白板与屏幕共享技巧.docx

华为云：华为云概览与核心服务.docx

【光学】基于matlab蒙特卡洛法模拟粒子的多次散射和单次散射计算【Matlab仿真 4228期】.zip

Stackelberg博弈方法无人机边缘计算中的抗干扰信道分配【Matlab仿真 7493期】.zip

【气动学】基于matlab弹道学与动态分析【含Matlab源码 9102期】.mp4

【模型预测控制】基于matlab单向拓扑结构下异构车辆排分布式模型预测控制【Matlab仿真 4968期】.zip

【气动学】基于matlab 120毫米迫击炮弹6度自由飞行仿真【Matlab仿真 8021期】.zip

2022年全国大学生数学建模竞赛曾获奖项（题目+源码）

最新推荐

vue实现一个6个输入框的验证码输入组件功能的实例代码

bootstrap 通过加减按钮实现输入框组功能

【无人机通信】基于matlab最佳高度和功率中继无人机通信位置部署【Matlab仿真 4834期】.zip

数字签名验签的MbedTLS代码实现Demo

NIST REFPROP问题反馈与解决方案存储库

管理建模和仿真的文件

gpuR包在R Markdown中的应用：创建动态报告的5大技巧

如何利用matrix-nio库，通过Shell脚本和Python编程，在***网络中创建并运行一个机器人？请提供详细的步骤和代码示例。

掌握LeetCode习题的系统开源答案

"互动学习：行动中的多样性与论文攻读经历"

css 设置点击按钮获取焦点或者焦点在该div的时候显示否则不显示