<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 900px;
            margin: 0 auto;
        }
        #text{
            width: 900px;
            height: 400px;
            margin: 0 auto;
            background-color: #fbe1c8;
            margin-top: 60px;
            outline: none;
            border-radius: 8px;
            border:2px solid #e59a56;
            overflow: hidden;
        }
        #tup{
            float: right;
            display: block;
            margin-top: 10px;
            margin-left: 20px;
            width: 60px;
            height: 36px;
            background-color: #e69b57;
            font-size: 18px;
            line-height: 36px;
            border-radius: 6px;
            text-align: center;
            color: #ffffff;
            cursor:pointer;
        }
        #wad{
            margin-top: 60px;
            width: 880px;
        }
        #wad p{
            font-size: 18px;
            line-height: 24px;
            border-bottom: 1px dashed #e69b57;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="text" contenteditable="true"></div>
        <span id="tup">提交</span>
        <div id="wad"></div>
    </div>
    <script>
        let Text = document.getElementById('text'),
            Tup = document.getElementById("tup"),
            Pl = document.getElementById("wad");
        Tup.onclick = function(){
                Li = "<p>" + Text.innerHTML + "</p>";
                Text.innerHTML = "";
                Pl.innerHTML += Li ;
            }
    </script>
</body>
</html>

文本框、评论框原生js的更多相关文章

  1. [必会] 表单验证+弹框~老司机原生js

    <!DOCTYPE html><html><head> <meta charset="gb2312"> <title>恰 ...

  2. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  3. 原生JS与jQuery操作DOM对比

    一.创建元素节点 1.1 原生JS创建元素节点 document.createElement("p"); 1.2 jQuery创建元素节点 $('<p></p&g ...

  4. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  5. 放弃jQuery，使用原生js吧！

    转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...

  6. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  7. vue实现实时监听文本框内容的变化（最后一种为原生js）

    一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  8. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  9. Selenium常用API用法示例集----下拉框、文本域及富文本框、弹窗、JS、frame、文件上传和下载

    元素识别方法.一组元素定位.鼠标操作.多窗口处理.下拉框.文本域及富文本框.弹窗.JS.frame.文件上传和下载 元素识别方法: driver.find_element_by_id() driver ...

  10. 折腾一天，获取下列多选框的所有选中值，原生js可直接通过obj.val()来获取，可jq不行，要通过循环取值来获取;

    折腾一天,获取下列多选框的所有选中值,原生js可直接通过obj.val()来获取,可jq不行,要通过循环取值来获取;

随机推荐

  1. hdu 5950 Recursive sequence

    题意:告诉你数列的递推公式为f(n+1)=f(n)+2*f(n-1)+(n+1)^4 以及前两项a,b:问第n项为多少,结果对2147493647取模. 题解:有递推公式,马上应该就能想到矩阵快速幂: ...

  2. Analyze提示:Value stored to &quot;***&quot;is never read

    text这个变量没有被使用,在当前类中搜索'text'这个变量发现仅仅是被赋值并没有被使用. 提示意思是:删除或者凝视这行代码;

  3. dbms_metadata.get_ddl的用法

    --GET_DDL: Return the metadata for a single object as DDL. -- This interface is meant for casual bro ...

  4. 深入struts2(二) ---stuts2长处和主要包、类功能

    1.1     Struts2 上节已讲.struts2在webwork基础发展起来的mvc框架.MVC框架相信一般码农都比較了解,这里不再重说. 在这里只对于一下struts1,struts2做了哪 ...

  5. SpringBoot在Impl类中调用其它service层失败解决办法

    在AImpl.java文件中引用BImpl.java的方法,编译正常,运行到调用的地方,报空指针异常,跟踪到异常位置,发现service为空,也就是按照之前controller层通过@Autowire ...

  6. 【JavaScript】JS读取XML文件并进行搜索

    需求效果 点击链接.当前页面载入xml文件并展示相应内容 通过搜索框.搜索xml文件内节点数据.展示包括内容的节点数据 功能实现 Demo终于实现效果 http://loadxmldemo.coder ...

  7. ping测试局域网内主机是否alive

    [root@zabbix ~]# cat alivehost.sh #!/bin/bash #Checks to see if hosts 192.168.1.100-192.168.1.200 ar ...

  8. luogu2346 四子连棋

    题目大意 在一个4*4的棋盘上摆放了14颗棋子,其中有7颗白色棋子,7颗黑色棋子,有两个空白地带,任何一颗黑白棋子都可以向上下左右四个方向移动到相邻的空格,这叫行棋一步,黑白双方交替走棋,任意一方可以 ...

  9. 自动生成Makefile的全过程详解

    一.简介 Linux下的程序开发人员,一定都遇到过Makefile,用make命令来编译自己写的程序确实是很方便.一般情况下,大家都是手工写一个简单Makefile,如果要想写出一个符合自由软件惯例的 ...

  10. Ubuntu下FileZilla的安装（转载）

    转自:http://os.51cto.com/art/201103/247564.htm FileZilla是一个免费而且开源的FTP客户端软件,共有两种版本:客户端版本.服务器版本.FileZill ...