本文摘自PHP中文网，作者V，侵删。
html实现实时查看效果的功能
（推荐教程：html教程）
如下面代码，将能够打开新页面查看我们在文本输入域中的代码效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>M</title>
<script type="text/javascript">
window.onload = function () {
console.log(document);
var runBtn = document.getElementById('input');
var runTextArea = document.getElementById('textarea');
runBtn.onclick = function() {
var oNewWin = window.open('about:blank');
oNewWin.document.write(runTextArea.value); }
}
</script>
</head>
<body>
<div>
<input type='button' id="input" value='运行'/><br/>
<textarea rows='10' cols='30' id="textarea" ></textarea>
</div>
</body>
</html>
|
如下图，文本输入框中的table就是我们输入的内容
效果如下所示：
如下图为新页面中的显示效果
阅读剩余部分
相关阅读 >>
Html如何改变字体大小
Html中图片显示不出来怎么办
input输入框只能输入数字、字母相关组合（正则表达式）
htm和Html是什么
Html代码如何格式化
Html dl标签作用是什么？Html dl标签的属性介绍和使用方法详解
Html换行代码是什么？
Html表格怎么设置宽度
Html最外层元素是什么？
解决Html视图解析器，Html乱码
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » html实现实时效果查看功能
