如何解决html获取不到textarea的值_打造属于自己的 HTML/CSS/JavaScript 实时编辑器

最新推荐文章于 2021-06-18 14:12:09 发布
最新推荐文章于 2021-06-18 14:12:09 发布
阅读量841 收藏
点赞数
文章标签： 如何解决html获取不到textarea的值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39890102/article/details/111377921
版权

目前市面上已经有很多类似的平台和方案了，类似像jsfiddle、CodePen、Storybook这样的平台，这些平台可以让我们在浏览器中创建代码并直接执行，无需单独在我们本地创建项目，所以当你在测试一段代码时，这些平台可能会为你提供一些帮助。
本篇文章是我们 “如何创建____编辑器” 系列中的第一篇，后续可能还会包括：

  • 创建一个Angular编辑器
  • 创建一个React编辑器
  • …


在本文中，我们将学习如何创建一个基本的 HTML/CSS/JS 编辑器。

让我们立即开始吧


首先，创建一个项目文件夹，例如：“js_editor“
创建index.html 和 editor.js 文件
现在，我们创建一个HTML，CSS和JS的选项卡，每个选项卡包含了一个文本框，一个文本框用于HTML、另一个用于CSS、最后一个用于JS。我们将使用iframe来呈现所有的HTML、CSS、JS。Iframe是一个创建新浏览器实例的html标记，它可以在其中呈现所有你自定义的代码效果，使用上就像你直接在浏览器中看到的效果是一样的。
现在，废话不多说，index.html全部代码如下：

<html><title>HTML/CSS/JS Playground</title><link rel="stylesheet" href='./bootstrap.min.css' /><body><style>textarea {background-color: black;color: white;width: 600px;height: 350px;}iframe {width: 400px;height: 350px}</style><div class="container"><h3>HTML/CSS/JS Playground</h3><div class="row"><div class="col-12"><ul id="myTab" class="nav nav-tabs"><li class="active"><a href="#html" data-toggle="tab"> HTML</a></li><li><a href="#css" data-toggle="tab">CSS</a></li><li><a href="#js" data-toggle="tab">JS</a></li></ul><div id="myTabContent" class="tab-content"><div class="tab-pane fade in active" id="html"><p><textarea style="float:left" id="htmlTextarea"></textarea></p></div><div class="tab-pane fade" id="css"><p><textarea style="float:left" id="cssTextarea"></textarea></p></div><div class="tab-pane fade" id="js"><p><textarea style="float:left" id="jsTextarea"></textarea></p></div></div></div><div class="col-12"><div><iframe id="iFrame"></iframe></div></div></div></div></body><script src="./jquery.js"></script><script src="./bootstrap.min.js"></script><script src="./editor.js"></script></html>
在其中，为了使选项卡功能更容易实现一点，我用到了bootstrap.min.js，bootstrap.min.css和jquery.js来帮助我。
现在，让我们继续丰富editor.js吧：

const getEl = id => document.getElementById(id)const iFrame = getEl('iFrame').contentWindow.documentconst htmlTextArea = getEl('htmlTextarea')const cssTextArea = getEl('cssTextarea')const jsTextArea = getEl('jsTextarea')document.body.onkeyup = function() {iFrame.open()iFrame.writeln(htmlTextArea.value +'<style>' +cssTextArea.value +'</style>' +'<script>' +jsTextArea.value +'</script>')iFrame.close()}
我们有一个函数getEl，它通过Dom的id来获取元素，下面我们得到iframe的contentwindow.document。 然后，我们分别创建HTML、CSS、JS textarea的实例，并获得内容。
我们监听了body元素的keyup 事件，如果其子元素输入任意内容，将会触发对函数的调用，然后通过writeln写入Dom，通过获取这些内容，即能在相应的标签中加入合适的内容。

开始使用编辑器


好的，经过简单的几行代码，我们的编辑器已经初具雏形，请在浏览器中加载index.html。在这，我们可以在相应的选项卡中输入相应的代码，右侧的iframe上即可完整呈现你设置的HTML、CSS和JS。
可以通过下面的gif看到，我是如何添加ID为“but“的按钮，然后设置样式，并在按钮上添加click事件并弹出”yes“框。

cb7b8abf5dbb5fd7caf9a0d4e1d8e0c9.gif

结论


制作一个属于自己的编辑器非常简单，我也在文末提供了本文使用的项目地址，如果有任何疑问或建议，欢迎提出，谢谢！
下载源码演示包


本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网
了解可嵌入您系统的在线 Excel，请前往SpreadJS纯前端表格控件

weixin_39890102
关注
html手机编辑器内含css,打造属于自己的 HTML/CSS/JavaScript 实时编辑器
weixin_42317482的博客
06-20 1699
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。目前市面上已经有很多类似的平台和方案了，类似像jsfiddle、CodePen、Storybook这样的平台，这些平台可以让我们在浏览器中创建代码并直接执行，无需单独在我们本地创建项目，所以当你在测试一段代码时，这些平台可能会为你提供一些帮助。本篇文章是我们 “如何创建____编辑器” 系列中的第一篇，后续可...
JQ change事件无法获取textarea标签中内容变化后的值
渡目成书
08-06 1782
在项目中碰到使用change事件触发后只能$(this）.text()获取到没改变前的值不是改变后的值。 可以给textarea标签加个name属性 var i_val = $("textarea[name='psn']").val(); 这样就可以获取到改变后的值了 ...
HTML 基础教程
积一时之步，臻千里之遥程
02-21 174
HTML 基础教程
html中表单textarea点击后其中的内容不见_HTML前端基础学习三(全,文末另附有css及js学习链接)...
weixin_39535125的博客
12-01 758
一.form表单 之前学习的标签更多的是向用户展示信息，假如服务器端需要验证用户是否存在，这时就需要有一个用户输入内容的标签。表单在网页中主要负责数据采集功能，它用<form>标签定义。用户输入的信息都要包含在form标签中，点击提交后，<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。 所有的用户输入内容的地方都...
html button样式_开发人员在编写HTML和CSS时最常犯的六大错误
weixin_39979159的博客
11-29 175
(给前端大学加星标，提升前端技能.)作者：Stas Melnikov 来自：csdn翻译https://dev.to/melnik909/the-6-most-common-mistakes-developers-when-writing-html-and-css-f92生活中犯错误是正常的，没有人不会犯错误，更何况是开发人员呢？今天我们就来卡看看开发人员在编写 HTML 和 CSS 时...
HTML_Editor.rar_html editor_html_editor_javascript_编辑框
09-23
在本资源包中，“HTML_Editor.rar”包含了创建一个简单的HTML编辑器的相关资料，主要涉及到HTML、CSS以及JavaScript技术。我们将深入探讨这三个方面的知识。 1. HTML（超文本标记语言）： HTML是构建网页的基础，它...
JavaScript源代码的简单实时代码编辑器.zip
06-29
这个编辑器可能采用了HTML5的`<textarea>`或`<code>`元素作为代码输入区域，CSS3进行样式布局，以及JavaScript进行逻辑处理。可能还用到了一些DOM操作API，如`document.querySelector`和`Element.innerHTML`等，来...
HTML在线编辑器的基本概念与相关资料第1/2页
12-09
在实际应用中，HTML在线编辑器可能会使用隐藏的textarea元素来存储IFrame中的HTML内容，以便在提交表单时将数据发送到服务器。通过这种方式，即使用户没有HTML知识，也能通过图形化的界面创建出包含丰富格式的网页...
01-md源码_html_富本编辑器前端源码_particularza9_
10-01
这个压缩包"01-md源码_html_富本编辑器前端源码_particularza9_"包含了富本编辑器的前端源码，意味着它提供了编辑器界面和交互逻辑的JavaScript代码，可能还包括CSS样式表和HTML模板。开发者可以研究这些源码，理解...
jquery无法获取到textarea中的值详解
weixin_44575373的博客
04-13 2067
问题描述： 今天在springboot中jquery读取前端的值通过jquery打包为json传入后端，发现其中textarea区域中的内容无法获取 解决办法： 首先看你的textarea中是否有 name属性和id属性 之后在对应的js文件中看看你的获取是否是.val()而不是.text() 验证 之后就可以刷新网页打开谷歌控制台，发现原来没有的Description出现了 ...
textarea标签获取不到值和获取值前面有空白格
dadada_youzi的博客
10-15 1063
1、textarea获取值不是通过value获取。而是 <textarea id="failureReason"name="failureReason" >${(faultCodeVo.failureReason)!''}</textarea> 2、textarea标签必须一行写完，隔行获取的值会出现前面有空格情况 正确写法：<textarea&gt...
html 中关于textarea的一些小知识
u012045045的博客
03-02 381
1.textarea没有value属性2.$("#textarea").text();读取，最近测试时候发现在firefox中读取不出textArea的值,IE正常于是修改为：$("#textarea").val();   问题解决3.JQuery给textarea取值和赋值取值var qrcodefortemcontent=$("#qrcodefortemcontent").val();赋值$(...
textarea根据id获取不到文本框的值时的解决方法
剑雪封喉
06-03 1万+
直接上例子：       MyHtml.html                      -->               $(document).ready(function () {         $('#s').click(function () { var personal_id = $($(".textarea
html 表单内容怎么获取不到,kindeditor提交表单时获取不到HTML内容解决办法
weixin_36208265的博客
06-08 303
kindeditor提交表单时获取不到HTML内容相关代码如下：KindEditor.ready(function(K){vareditor1=K.create('textarea[name="description"]',{cssPath:'../plugins/code/prettify.css',uploadJson:'../baseData/upload_json.jsp...
记一次Bootstrap框架下 使用Ajax失效的问题
weixin_30265103的博客
05-15 410
最近写一个简单的后台管理系统，前台是套用的一套Bootstrap框架的一套模板。在HTML页面的模板上，用一些简单的jquery脚本，使用JSP页面完成前后台交互。 在写到一个AJAX请求的时候，发现AJAX请求可以到后台，但是返回不了JSON数据，页面最后的效果是刷新当前页面，还把参数给刷没了。。 经检查，发现自己绑定事件的button标签在form表单里，也就是在form表单里的butto...
html textarea获取文本,javascript – 逐行从textarea获取文本？
weixin_30061949的博客
06-18 1377
Ok使用Javascript$(document).ready(function(){$("#test").val("123e2oierhqwpoiefdhqwopidfhjcospid");});$("#button_test").on("click",function(){var as=document.getElementById("test").value;console.log(as);...
storybook的介绍和使用 比较火的响应式UI开发及测试环境 ...
weixin_34226706的博客
12-30 1084
storybook是一套最近比较火的响应式UI 开发及测试环境。 可以可视化开发调试react，vue组件 官网：https://github.com/storybooks/storybook 至于为什么叫storybook，应该是敏捷开发中的user story有关，找了篇 文章，不了解的同学可以看下 根据...
【storybook】神奇工具storybook！只是用来做组件库？（浅谈CDD组件驱动开发）
不忘初心，坚定道路！
05-22 1万+
前言 我一开始以为storybook是做组件库用的，随着我后面了解越来越深发现压根不是这么回事。 我在写组件库中发现，很多功能比如umi-library(现在改名umi-father)都有了，storybook和umi-farther用的都是docz，那我直接用docz，干嘛用storybook？后来经过我不断的翻storybook才发现storybook压根不是只为了做组件库存在的。 storybookUI 我们先说一下不装插件的storybookUI，奇丑无比，一个canvas的tab页，
js获取html内容（解决获取不到input输入的值的问题）
热门推荐
qq_34377273的博客
08-20 1万+
怎么完整的获取到网页中 的内容？ 我们知道，在一个页面中，我们有时候需要获取某个指定标签下的内容（完整的html代码内容），js中提供了document.getElementById("divID").innerHTML;方法可以使我们获取到指定ID内的所有html代码，但是这往往不能满足我们的需求，当标签中有input或者textarea标签供我们输入内容是，这个时候用innerH...
请基于html和css和javascript写一个多功能文本编辑器并给出代码
最新发布
02-18
为了实现这一功能，我们可以使用html、css和javascript编写一个简单的多功能文本编辑器，具体的代码如下： <html> <head> <title>多功能文本编辑器</title> <script type="text/javascript"> // 定义编辑器对象 var editor = { // 添加文字 addText: function(text) { // 获取文本框对象 var textbox = document.getElementById('textbox'); // 将新文字添加到文本框尾部 textbox.value += text; }, // 清空文本框 clearText: function() { // 获取文本框对象 var textbox = document.getElementById('textbox'); // 清空文本框 textbox.value = ''; } }; </script> <style type="text/css"> #textbox { width: 400px; height: 200px; } </style> </head> <body> <textarea id="textbox"></textarea> <button onclick="editor.addText('Hello World!')">添加文字</button> <button onclick="editor.clearText()">清空文本框</button> </body> </html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值