开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

用js添加一个文本输入框

当然，可以使用JavaScript动态地在网页中添加一个文本输入框。以下是一个完整的示例，展示了如何实现这一功能：

HTML 结构

首先，创建一个简单的HTML页面，其中包含一个按钮，用于触发添加文本输入框的操作。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态添加文本输入框示例</title>
    <style>
        .input-container {
            margin-top: 10px;
        }
        .input-container input {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <button id="addInputBtn">添加文本输入框</button>
    <div id="inputsContainer"></div>

    <!-- 引入JavaScript -->
    <script src="script.js"></script>
</body>
</html>

JavaScript 代码 (`script.js`)

接下来，编写JavaScript代码，实现点击按钮后动态添加文本输入框的功能。

// 获取按钮和容器元素
const addInputBtn = document.getElementById('addInputBtn');
const inputsContainer = document.getElementById('inputsContainer');

// 计数器，用于跟踪添加了多少个输入框
let inputCount = 0;

// 添加点击事件监听器
addInputBtn.addEventListener('click', () => {
    inputCount++; // 增加计数器

    // 创建一个新的输入框元素
    const newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.id = `input-${inputCount}`;
    newInput.name = `input-${inputCount}`;
    newInput.placeholder = `请输入内容 ${inputCount}`;

    // 可选：创建一个删除按钮，用于移除对应的输入框
    const deleteBtn = document.createElement('button');
    deleteBtn.type = 'button';
    deleteBtn.textContent = '删除';
    deleteBtn.style.marginLeft = '5px';

    // 添加删除按钮的事件监听器
    deleteBtn.addEventListener('click', () => {
        inputsContainer.removeChild(newInput.parentElement);
    });

    // 创建一个容器来包裹输入框和删除按钮
    const inputWrapper = document.createElement('div');
    inputWrapper.className = 'input-container';
    inputWrapper.appendChild(newInput);
    inputWrapper.appendChild(deleteBtn);

    // 将新的输入框添加到页面中的容器里
    inputsContainer.appendChild(inputWrapper);
});

解释

HTML 部分:
- 一个按钮 (#addInputBtn) 用于触发添加输入框的操作。
- 一个容器 (#inputsContainer) 用于存放动态添加的输入框。

JavaScript 部分:
- 获取按钮和容器的引用。
- 使用 addEventListener 为按钮添加点击事件监听器。
- 每次点击按钮时，创建一个新的 <input> 元素，并设置其属性（如 type, id, name, placeholder）。
- 可选地，创建一个“删除”按钮，允许用户移除不需要的输入框。
- 将新的输入框和删除按钮包裹在一个容器中，并添加到页面的主容器里。

优势与应用场景

动态交互: 允许用户根据需要添加或删除输入框，提高用户体验。
灵活性: 适用于表单内容不固定或需要用户自定义输入项的场景。
可扩展性: 可以轻松扩展功能，例如添加输入验证、不同类型的输入框等。

常见问题及解决方法

输入框未显示:
- 确保JavaScript代码正确引入，并且没有语法错误。
- 检查控制台是否有错误信息，使用 console.log 调试代码执行流程。

多个删除按钮失效:
- 确保每个删除按钮都有独立的事件监听器，而不是共享同一个。
- 使用事件委托或在创建删除按钮时绑定独立的事件处理函数。
样式问题:
- 使用CSS类来统一管理动态添加元素的样式，确保页面美观一致。

通过以上示例和解释，你应该能够在自己的项目中实现动态添加文本输入框的功能。如有进一步的问题，欢迎继续提问！

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

安卓webview注入js修改网页文本或添加其他元素

加载的同时，网页的任何元素我们都是可以修改的，隐藏、替换、插入新的html元素balabala，总之，webview的神奇给了我们很多发挥创意的可能：而且操作起来也是异常简单，几乎是模板代码，不管你是否精通js...2018120200582056.png /** * 注入js隐藏部分div元素，多个操作用多个js去做才能生效 */ private void hideHtmlContent() { /.../修改文本，可以注入任意的html代码，我是直接注入一段带样式的文本节点，表现良好 String javascriptq = "javascript:function modifyText()...于是，随便换一个能实时调用的地方，问题解决。就是这么粗暴，看其他文章有说写handler和线程去搞，太麻烦了，还得开线程，不能忍，最后，还是用我的简单粗暴的方法，效果依旧完美。

4.4K3 0

用clipboard.js实现纯JS复制文本到剪切板

今天火端开始使用clipboard.js来复制网页文本内容了，clipboard.js不需要flash，也不依赖其它的js库，min版仅11KB，GZIP压缩后仅3KB，非常的小巧。...点击复制 js..."> new Clipboard('.btn'); 如果要添加事件，可以这样点击复制 js

3.6K1 0

「 giao-js 」用js写一个js解释器

前言在这篇文章中,我们将通过 JS 构建我们自己的 JS 解释器,用 JS 写 JS,这听起来很奇怪,尽管如此,这样做我们将更熟悉 JS,也可以学习 JS 引擎是如何工作的!...Mini Js Interpreter~ 实践准备 Acorn.js A tiny, fast JavaScript parser, written completely in JavaScript....一个完全使用 javascript 实现的,小型且快速的 javascript 解析器本次实践我们将使用 acorn.js ,它会帮我们进行词法分析,语法解析并转换为抽象语法树。...项目初始化 // visitor.ts 创建一个Visitor类,并提供一个方法操作ES节点。...目前只实现了几个语法,本文只是提供一个思路。

46.5K2 0

用JS实现一个模板引擎

下面是一个具体的使用例子。安装 npm install ejs 使用示例在koa中使用ejs模板引擎。...index.js const Koa = require('koa') const views = require('koa-views') const path = require('path') const...下面我们来手写一个简单的类ejs模板引擎。需求分析实现模板引擎先要定义模板的语法，这里我们就重新不定义了，直接使用ejs的语法。...在里面的字符，保留为js逻辑在里面的字符，保留js逻辑，且其值输出为html代码。对这些处理方式，着手实现。正则/一个 "echo(`"，结尾加一个结束符号，也能达到统一的结果。

1.6K2 0

用js实现一个冒泡排序

首先从数组的第一个元素开始到数组的最后一个元素为止，对数组中相邻的两个元素进行比较，如果位于数组左端的元素大于数组右端的元素，则交换这两个元素在数组中的位置。

3641 0

用js徒手写一个路由框架

分别创建 index.html 、 main.js 、router.js 和 route.js文件 route.js export class Route { constructor(name,..._handler = handler; } } router.js import { Route } from '..../route.js' export class Router { constructor() { this.mode = 'history' this.routes = []...replace(/\/$/, '') window.kk = window.kk.replace(/#(.*)$/, '') + '#' + route } } } main.js.../router.js' const router = new Router() router.mode = 'hash' router.root = 'http://192.168.1.103:8080

6851 0

用js实现一个div弹出图层

用js实现一个弹出图层，具体效果：点击按钮后弹出图层，图层处于页面中间、带有阴影的圆角边框、图层中有input、提交按钮、关闭按钮、标题，弹出后背景页面不可点击、背景变灰。...所有代码不分开、放在一个html中显示。以下是一个简单的JavaScript代码示例： <!...overlay.style.display = "none"; document.body.style.overflow = "auto"; } 该代码使用了CSS样式，包含一个按钮和一个弹出图层...如果想隐藏JS功能逻辑，可用JShaman对JS代码进行混淆加密，加密后的代码是密文状态，不可读、不可分析。

7.4K5 0

【Javascript】用 js 写一个模板引擎

user.id|safe }">{ user.company } js...(model) { return fn.apply(model); }; } 这个我们能用这个模板引擎创建一个我们前端需要的...这里面我们使用正则表达式去匹配字符串中的变量，当然，你要对js正则表达式熟练应用。

2041 0

用js实现一个状态机

console.log(fsm.result) /* nodejs var fs = require('fs'); var str = fs.readFile('fsm6.js

1.9K2 0

用 Vue.js 实现一个 JSON Viewer

翻下 Json.cn 的源码, 发现是用 jQuery 写的, 代码量不多, 比较有用的就是缩进填充函数 indent_tab 还有类型判断函数 _typeof: function indent_tab...tmp_array.join(',') + '' + indent_tab(indent_count - 1) + '}'; } 递归返回组件了解原理之后, 再回头想想该如何用 Vue.js...如何实现组件化 JSON由key和val组成, 不妨将它们各自拆分为一个组件; JSON的每一行由key:val组成, key:val合并为item组件....第一个单词 var, 用 const 啊! 好吧我只是为了说明原理, 所以没有用 ES6/7 等高级特性, 没有 webpack 也没有 npm, 全部被我撸在一个 html 里了哈哈哈!...key 组件组件 key 逻辑比较简单, key 用双引号 " 包起来, 如果是数组的 key, 那就不渲染. 另外再根据层级填充缩进字符即可: <!

3532 0

用原生js写一个多动症的简历

用原生js写一个"多动症"的简历预览地址源码地址最近在知乎上看到@方应杭用vue写了一个会动的简历，觉得挺好玩的，研究一下其实现思路，决定试试用原生js来实现。...会动的简历实现思路这张会动的简历，就好像一个打字员在不断地录入文字，页面呈现动态效果。又好像一个早已经录制好影片，而我们只是坐在放映机前观看。...background: red; } 项目搭建在这个项目中我们使用webpack2来完成项目的构建使用yarn来处理依赖包的管理使用es6的写法使用部分原生dom操作api standard.js...代码风格约束利器) 目录结构如下最重要的几个模块分别是resumeEditor(简历编辑模块) 、 stylesEditor(简历样式编辑模块) 、以及vQuery(封装的dom操作模块) 最后app.js...markdownToHtmlWrap) .then(showStylesWrap.bind(null, 2)) 可以看到，代码清爽了很多，纵向发展，应用第一步第二步第三步...一眼就能够看出来，当然实现的逻辑是将原来的相关的模块用Promise

6.9K7 0

用JS手动实现一个栈和队列

栈栈是一个「线性」的数据结构。栈最重要的特征是「只允许从一端操作数据」。栈就像一叠书，或者盘子，每次只能从最上边拿，往最上边放。栈遵循「先进后出」的原则。...看到这里我们就能知道，由于入栈和出栈都在栈顶操作，所以插入或删除一个元素的复杂度为O(1)。特殊情况下，当栈满的时候，再添加一个元素时，需要重新分配内存且移动所有的数据，复杂度为O(n)。...栈队列队列也是一个线性的存储结构，特点是「只能在一端添加数据，在另一端删除数据」，遵循「先进先出」的原则。...我们还是用数组来实现一个单链队列，代码实现如下： class Queue{ constructor() { this.queue = [] } // 入队 enQueue(...用两个栈实现队列。实现一个栈，要求入栈出栈、返回最小值，且时间复杂度为O(1)。一个数组实现两个栈。跟队列相关的面试题：用两个队列实现栈。二叉树的广度优先遍历。 ...

8662 0

用原生js写一个多动症的简历

用原生js写一个"多动症"的简历预览地址源码地址最近在知乎上看到@方应杭用vue写了一个会动的简历，觉得挺好玩的，研究一下其实现思路，决定试试用原生js来实现。...会动的简历实现思路这张会动的简历，就好像一个打字员在不断地录入文字，页面呈现动态效果。又好像一个早已经录制好影片，而我们只是坐在放映机前观看。...background: red; } 项目搭建在这个项目中我们使用webpack2来完成项目的构建使用yarn来处理依赖包的管理使用es6的写法使用部分原生dom操作api standard.js...(代码风格约束利器) 最重要的几个模块分别是resumeEditor(简历编辑模块) 、 stylesEditor(简历样式编辑模块) 、以及vQuery(封装的dom操作模块) 最后app.js...markdownToHtmlWrap) .then(showStylesWrap.bind(null, 2)) 可以看到，代码清爽了很多，纵向发展，应用第一步第二步第三步...一眼就能够看出来，当然实现的逻辑是将原来的相关的模块用Promise

5.3K2 0

用js徒手写一个中间键

下图中 C和D 的部分就是中间键创建一个js文件 middleware.js 内容如下 const App = () => { const req = { type: 'request...req, res) => { console.log('Response object accessd from get function') }) 执行这段代码 node middleware.js

9251 0

炸裂，用JS创建一个录屏功能

OBS studio很酷，但 JavaScript 更酷，现在，我们用 JavaScript 创建自己的录屏功能。首先，创建一个HTML文件，包含记录按钮和一个播放标签，内容如下： js"> 然后在创建 index.js，监听按钮的点击： let btn = document.querySelector(".record-btn...现在你可能认为选择一个屏幕，然后点击分享，就开始录制了。非也，这个比我们想象中的复杂点。我们要使用 MediaRecorder 来录制我们的视频。...}) // 必须手动启动 mediaRecorder.start() }) 当我们的屏幕被录制下来时，mediaRecorder 会给我们提供分块的数据，我们需要将这些数据存储在一个变量中...---- 代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

1.2K2 0

用js写了一个批量发短信的脚本

可能的问题 Axios的POST请求主体默认是json，但api可能只接受x-www-form-urlencoded编码一方面，header要添加content-type信息，另一方面，需要引入qs库

2.5K2 0

实战 | 用原生js写一个多动症的简历

又好像一个早已经录制好影片，而我们只是坐在放映机前观看。...接下来让我们一步步完成它项目搭建在这个项目中我们 1、使用webpack2来完成项目的构建 2、使用yarn来处理依赖包的管理 3、使用es6的写法 4、使用部分原生dom操作api 5、standard.js...代码风格约束利器) 目录结构如下最重要的几个模块分别是resumeEditor(简历编辑模块) 、 stylesEditor(简历样式编辑模块) 、以及vQuery(封装的dom操作模块) 最后app.js...可以看出它做的事就是封装一个构造函数Vquery，它的实例会有一些简单的dom操作方法，最后为了能够像jQuery那样使用$().funcName的形式去使用，我们导出了一个匿名函数，在匿名函数中去new...我们来看一下promise分支中app模块最终的写法可以看到，代码清爽了很多，纵向发展，应用第一步第二步第三步...一眼就能够看出来，当然实现的逻辑是将原来的相关的模块用Promise包装起来，并且在原来回调函数执行的地方

4K1 0

精读《用160行js代码实现一个React》

some-list__item">One Two ; 为了能够让他被编译成常规的方法，我们需要加上注释来定义用哪个函数...React is not defined错误，但是我安装的是作者这个简易的类React包，后来才知道在jsx前要加一段注释来告诉babel编译的时候用哪个函数 /** @jsx Gooact.createElement...如何判断这个节点应该渲染成真实dom的什么样子呢，这里就会有3种情况，第一种就是直接会返回一个字符串，那我们就直接生成一个文本节点，如果返回的是一个我们自定义的组件，那么我们就在调用这个方法，如果是一个常规的...dom, prop, vdom.props[prop]); active.focus(); return dom; } }; Component 组件是最像js...反正笔者看了原文对React框架思路又更加清晰了，最后献上使用这个框架的用例demo

6741 0

一个用Go编写的WIP最小文本编辑器

Phi is a minimal code editor designed to look pretty, run fast, and be easy to c...

6812 0

用Rust和React创建一个富文本编辑器

用Rust和React创建一个富文本编辑器作者：Arend van Beelen 原文链接：Creating a Rich Text Editor using Rust and React 译者：Yodonicc...我们曾经使用Slate.js——一个很好的编辑器——但是当我们为协作编辑实现我们自己的富文本基元时，我们发现我们自己的基元和Slate的数据模型之间的脱节是一个阻碍因素。...所以我们开始思考——如果我们建立自己的富文本编辑器（RTE, Rich Text Editor）会怎样？从一个非常高层次的角度来看，一个富文本编辑器是由两个部分组成的。...然后，我们添加了必要的事件处理程序来捕捉用户的互动，这又将再次调用数据模型上的适当逻辑。那么用户的光标呢？只是另一个我们自己插入的小React组件。...这相对简单，因为我们的用例非常专业，而且它还有一个好处，如果真实DOM中发生任何意外（可能是由于浏览器扩展），我们的算法将简单地将视图恢复到我们基于数据模型的预期。

2.6K13 3

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭