css和js示例

2026年01月02日 18:14

HTML 输入框 + 按钮交互实现

本文详细讲解输入框与按钮的基础结构搭建、样式美化、核心交互逻辑，以及实用的效果改造方案，内容可直接复制运行。

一、基础结构（HTML）

在 <body> 标签内编写输入框和按钮的核心结构，通过 id 为后续交互绑定标识。

<input type="text" id="myInput" placeholder="请输入内容">
<button id="myBtn">点击我</button>

关键说明

input：创建文本输入框，type="text" 限定为文本输入类型。
button：创建可点击的按钮元素。
id：元素的唯一标识，用于 JavaScript 精准获取元素。

二、样式美化（CSS）

在 <head> 标签内嵌入 <style> 标签，为输入框和按钮添加视觉样式。

/* 输入框样式 */
#myInput {
    width: 260px;
    height: 40px;
    font-size: 16px;
    padding-left: 10px;
    border: 2px solid #666;
    border-radius: 6px;
    outline: none; /* 取消聚焦时的默认外边框 */
}

/* 按钮基础样式 */
#myBtn {
    width: 100px;
    height: 44px;
    font-size: 16px;
    margin-left: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer; /* 鼠标悬停显示手型 */
}

/* 按钮悬停效果 */
#myBtn:hover {
    background-color: #45a049; /* 悬停时加深绿色 */
}

样式亮点

圆角设计：border-radius 让元素边角更圆润，提升现代感。
交互细节：cursor: pointer 强化按钮的可点击提示，outline: none 优化输入框聚焦体验。

三、核心交互（JavaScript）

在 </body> 闭合标签前嵌入 <script> 标签，实现“点击按钮获取输入内容并弹窗”的核心逻辑。

document.getElementById("myBtn").onclick = function () {
    // 获取输入框的文本内容
    var text = document.getElementById("myInput").value;
    // 弹窗展示输入内容
    alert("你输入的是：" + text);
};

逻辑拆解

绑定点击事件：为按钮的 onclick 绑定自定义函数，点击时触发。
获取输入内容：通过 value 属性读取输入框的文本。
弹窗展示：通过 alert() 弹出包含输入内容的提示框。

四、完整可运行示例

整合 HTML、CSS、JavaScript，复制到 .html 文件即可直接运行。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>输入框 + 按钮点击效果</title>

    <style>
        #myInput {
            width: 260px;
            height: 40px;
            font-size: 16px;
            padding-left: 10px;
            border: 2px solid #666;
            border-radius: 6px;
            outline: none;
        }

        #myBtn {
            width: 100px;
            height: 44px;
            font-size: 16px;
            margin-left: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
        }

        #myBtn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <input type="text" id="myInput" placeholder="请输入内容">
    <button id="myBtn">提交</button>

    <script>
        document.getElementById("myBtn").onclick = function () {
            var text = document.getElementById("myInput").value;
            alert("你输入的是：" + text);
        };
    </script>
</body>
</html>

五、实用交互效果改造

基于基础逻辑，改造出更贴合实际开发的交互效果。

1. 点击后清空输入框

在点击事件内为输入框 value 赋值为空，实现清空效果。

document.getElementById("myBtn").onclick = function () {
    var text = document.getElementById("myInput").value;
    alert("你输入的是：" + text);
    // 清空输入框
    document.getElementById("myInput").value = "";
};

2. 输入为空时提示（非空校验）

先校验输入内容，为空则提示并终止后续逻辑，避免无效操作。

document.getElementById("myBtn").onclick = function () {
    var text = document.getElementById("myInput").value;

    // 非空校验
    if (text === "") {
        alert("请输入内容！");
        return; // 终止函数，不再执行后续代码
    }

    alert("你输入的是：" + text);
};

3. 内容显示在页面（替代弹窗）

放弃弹窗，将输入内容展示在页面指定区域，提升体验。

步骤1：添加展示区域（HTML）

在 <body> 中新增用于展示结果的标签：

<input type="text" id="myInput" placeholder="请输入内容">
<button id="myBtn">提交</button>
<!-- 结果展示区域 -->
<p id="result"></p>

步骤2：修改交互逻辑（JavaScript）

document.getElementById("myBtn").onclick = function () {
    var text = document.getElementById("myInput").value;

    if (text === "") {
        alert("请输入内容！");
        return;
    }

    // 将内容显示在页面
    document.getElementById("result").innerText = "你输入的是：" + text;
};