HTML网页中插入输入框，输入框内容或代码可点击"运行代码"运行，在浏览器看到运行输入框内代码效果。此HTML代码由表单代码textarea和简单JS代码实现。 HTML代码： </h1> </div> </header> <main class="content" role="main"> <div class="leftbox"> <article class="post tag-uifont tag-webview"> <header class="post-header"> <footer class="tc"> <time class="post-date" datetime="2021-11-18">2021-11-18</time> </footer> </header> <section class="post-content"> <div class="contentbef"> </div> <p style="font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', '微软雅黑';color:rgb(51,51,51);"> HTML网页中插入输入框，输入框内容或代码可点击"<strong>运行代码</strong>"运行，在浏览器看到运行<a href="http://www.divcss5.com/html/h374.shtml" rel="nofollow" style="color:rgb(0,0,204);" target="_blank">输入框</a>内代码效果。此HTML代码由<a href="http://www.divcss5.com/html/h373.shtml" rel="nofollow" style="color:rgb(0,0,204);" target="_blank">表单代码</a><a href="http://www.divcss5.com/html/h382.shtml" rel="nofollow" style="color:rgb(0,0,204);" target="_blank">textarea</a>和简单JS代码实现。</p> <p style="font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', '微软雅黑';color:rgb(51,51,51);"> <a href="http://www.divcss5.com/html/" rel="nofollow" style="color:rgb(0,0,204);" target="_blank">HTML</a>代码：</p> <pre style="font-family:'Courier New', monospace;font-size:14px;border:1px solid rgb(0,153,0);color:rgb(51,51,51);"></pre> <ol style="line-height:1.5;font-family:tahoma, 'microsoft yahei', '微软雅黑';border-top:none;border-right:none;border-bottom:none;border-left:2px solid rgb(204,51,0);color:rgb(92,92,92);"> <li style="line-height:1.3em;border:none;color:inherit;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;"><span style="border:none;color:rgb(0,51,255);background-color:inherit;"><</span><span style="border:none;color:rgb(0,51,255);background-color:inherit;">textarea</span><span style="border:none;background-color:inherit;"> </span><span style="border:none;color:#FF0000;background-color:inherit;">name</span><span style="border:none;background-color:inherit;">=</span><span style="border:none;color:#0000FF;background-color:inherit;">"textarea"</span><span style="border:none;background-color:inherit;"> </span><span style="border:none;color:#FF0000;background-color:inherit;">cols</span><span style="border:none;background-color:inherit;">=</span><span style="border:none;color:#0000FF;background-color:inherit;">"60"</span><span style="border:none;background-color:inherit;"> </span><span style="border:none;color:#FF0000;background-color:inherit;">rows</span><span style="border:none;background-color:inherit;">=</span><span style="border:none;color:#0000FF;background-color:inherit;">"10"</span><span style="border:none;background-color:inherit;"> </span><span style="border:none;color:#FF0000;background-color:inherit;">id</span><span style="border:none;background-color:inherit;">=</span><span style="border:none;color:#0000FF;background-color:inherit;">"rn01"</span><span style="border:none;color:rgb(0,51,255);background-color:inherit;">></span><span style="border:none;background-color:inherit;"> </span></span></li> <li style="line-height:1.3em;border:none;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;">要运行代码放这里 </span></li> <li style="line-height:1.3em;border:none;color:inherit;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;"><span style="border:none;color:rgb(0,51,255);background-color:inherit;"></</span><span style="border:none;color:rgb(0,51,255);background-color:inherit;">textarea</span><span style="border:none;color:rgb(0,51,255);background-color:inherit;">></span><span style="border:none;background-color:inherit;"> </span></span></li> </ol> <p style="font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', '微软雅黑';color:rgb(51,51,51);"> JS代码：</p> <pre style="font-family:'Courier New', monospace;font-size:14px;border:1px solid rgb(0,153,0);color:rgb(51,51,51);"></pre> <ol style="line-height:1.5;font-family:tahoma, 'microsoft yahei', '微软雅黑';border-top:none;border-right:none;border-bottom:none;border-left:2px solid rgb(204,51,0);color:rgb(92,92,92);"> <li style="line-height:1.3em;border:none;color:inherit;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;"><span style="border:none;color:rgb(0,51,255);background-color:inherit;"><</span><span style="border:none;color:rgb(0,51,255);background-color:inherit;">script</span><span style="border:none;background-color:inherit;"> </span><span style="border:none;color:#FF0000;background-color:inherit;">language</span><span style="border:none;background-color:inherit;">=</span><span style="border:none;color:#0000FF;background-color:inherit;">"JavaScript"</span><span style="border:none;background-color:inherit;"> </span><span style="border:none;color:#FF0000;background-color:inherit;">type</span><span style="border:none;background-color:inherit;">=</span><span style="border:none;color:#0000FF;background-color:inherit;">"text/JavaScript"</span><span style="border:none;color:rgb(0,51,255);background-color:inherit;">></span><span style="border:none;background-color:inherit;"> </span></span></li> <li style="line-height:1.3em;border:none;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;">//运行文本域代码 </span></li> <li style="line-height:1.3em;border:none;color:inherit;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;">function runEx(cod1) { </span></li> <li style="line-height:1.3em;border:none;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;"><span style="border:none;color:#FF0000;background-color:inherit;">cod</span><span style="border:none;background-color:inherit;">=</span><span style="border:none;color:#0000FF;background-color:inherit;">document</span><span style="border:none;background-color:inherit;">.all(cod1) </span></span></li> <li style="line-height:1.3em;border:none;color:inherit;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;">var <span style="border:none;color:#0000FF;background-color:inherit;">cod</span><span style="border:none;color:#FF0000;background-color:inherit;">code</span><span style="border:none;background-color:inherit;">=cod.value; </span></span></li> <li style="line-height:1.3em;border:none;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;">if (code!=""){ </span></li> <li style="line-height:1.3em;border:none;color:inherit;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;">var <span style="border:none;color:#FF0000;background-color:inherit;">newwin</span><span style="border:none;background-color:inherit;">=</span><span style="border:none;color:#0000FF;background-color:inherit;">window</span><span style="border:none;background-color:inherit;">.open('','',''); //打开一个窗口并赋给变量newwin。 </span></span></li> <li style="line-height:1.3em;border:none;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;"><span style="border:none;color:#FF0000;background-color:inherit;">newwin.opener</span><span style="border:none;background-color:inherit;"> = </span><span style="border:none;color:#0000FF;background-color:inherit;">null</span><span style="border:none;background-color:inherit;"> // 防止代码对论谈页面修改 </span></span></li> <li style="line-height:1.3em;border:none;color:inherit;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;">newwin.document.write(code); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。 </span></li> <li style="line-height:1.3em;border:none;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;">newwin.document.close(); </span></li> <li style="line-height:1.3em;border:none;color:inherit;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;">} </span></li> <li style="line-height:1.3em;border:none;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;">} </span></li> <li style="line-height:1.3em;border:none;color:inherit;list-style-position:outside !important;"><span style="border:none;color:#000000;background-color:inherit;"><span style="border:none;color:rgb(0,51,255);background-color:inherit;"></</span><span style="border:none;color:rgb(0,51,255);background-color:inherit;">script</span><span style="border:none;color:rgb(0,51,255);background-color:inherit;">></span><span style="border:none;background-color:inherit;"> </span></span></li> </ol> <p style="font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', '微软雅黑';color:rgb(51,51,51);"> 可将以上JS代码直接放到HTML的<a href="http://www.divcss5.com/html/h62.shtml" rel="nofollow" style="color:rgb(0,0,204);" target="_blank">head</a>内。</p> <p style="font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', '微软雅黑';color:rgb(51,51,51);"> <strong>1、效果截图：</strong></p> <p style="font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', '微软雅黑';color:rgb(51,51,51);text-align:center;"> <img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpneU1pOWtNbUk1WXpReVpqQm1ORE0zWTJabFkyUXpaR1prTUdVM1pUYzRZekpqWlM1d2JtYz0=" alt='HTML网页中插入输入框，输入框内容或代码可点击"运行代码"运行，在浏览器看到运行输入框内代码效果。此HTML代码由表单代码textarea和简单JS代码实现。 HTML代码： <textarea n' title='HTML网页中插入输入框，输入框内容或代码可点击"运行代码"运行，在浏览器看到运行输入框内代码效果。此HTML代码由表单代码textarea和简单JS代码实现。 HTML代码： <textarea n'><br> 网页中“运行代码”截图</p> <p style="font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', '微软雅黑';color:rgb(51,51,51);"> <strong>2、在线演示效果如下</strong></p> <p style="font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', '微软雅黑';color:rgb(51,51,51);"> <textarea cols="60" rows="10" style="font-size:12px;line-height:1.5;font-family:tahoma, 'microsoft yahei', '微软雅黑';"> 
 点击”运行代码“试试

3、在线演示：查看案例

4、打包下载网站HTML代码：

立即下载 （1.376KB）

DIVCSS5测试有效兼容各大浏览器！

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/template/m712.shtml

相关文章：

Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode