效果图：

HTML:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/style.css" />

        <script src="js/script.js"></script>

    </head>

    <body>

        <div class="body">

            <div class="box">

                <form method="" action="">

                <div class="pl"><div>评论&nbsp;<span>7</span></div></div>

                <div class="wbk">

                    <div class="tx"></div>

                    <div class="srk">

                        <div class="srknr"><textarea class="area" id="txtarea">你的评论可以一针见血</textarea></div>

                        <div class="s-button">

                            <input type="button" class="jc btn" onclick="bold()" />                       //使用ul li标签一样可行

                            <input type="button" class="qx btn" onclick="italic()"/>

                            <input type="button" class="syh btn" onclick="Quotes()"/>

                            <input type="button" class="scx btn" onclick="linetrough()"/>

                            <input type="button" class="xhx btn" onclick="underline()"/>

                        </div>

                        <div class="button"><input type="button" class="tj-button" name="" id="" value="提交评论" /></div>

                    </div>

                </div>

                <div class="add">

                    <div class="text"><input type="text" name="name" class="texts" id="name" value="昵称" onclick = "change('name')"/></div>

                    <div class="text"><input type="text" name="email" class="texts" id="email" value="邮箱" onclick = "change('email')"/></div>

                    <div class="text"><input type="text" name="site" class="texts" id="site" value="网址" onclick = "change('site')"/></div>

                    <div class="label"><div class="lab">昵称(必填)</div><div class="lab">邮箱(必填)</div><div class="lab">网址</div></div>

                </div>

                </form>

            </div>

        </div>

    </body>

</html>

布局CSS:

    *{padding:;margin:;}

    .body{ border:1px solid #dddddd; width:1200px; height:1000px; margin:0 auto; box-shadow:0px 0px 50px gainsboro;}

    .box{width:818px; height:408px; border:1px solid #dddddd; margin:100px auto; box-shadow:0px 0px 50px -2px gainsboro;}

    .box .pl{width:776px; height:40px; border:1px solid #eaeaea; margin:25px 0 0 20px;}

    .box .pl div{font:18px/40px "微软雅黑"; margin-left:10px;}

    .box .pl span{color:red;}

    .box .wbk{width:778px; height:116px; margin:15px 0 0 20px; position:relative;}

    .box .wbk .tx{width:46px; height:114px; background: url(../img/header.gif) no-repeat;}

    .box .wbk .srk{width:728px; height:112px; border:2px solid #ccd4d9; position:absolute; top:; right:;}

    .box .wbk .srk .srknr{width:728px; height:76px; }

    .box .wbk .srk .area{width:728px; height:76px; border:none; font:12px/24px "微软雅黑"; color:#c6b1a9; text-indent:6px;}

    .box .wbk .srk .s-button{width:630px; height:35px; border-top:1px solid #f2f2f2; float:left; padding-top:8px; padding-left:10px;}

    .box .wbk .srk .s-button .btn{margin-right:12px; width:12px; height:12px; border:none;}

    .box .wbk .srk .s-button .wx{background:url(../img/wx.gif) no-repeat;}                          //使用图片整合技术会更好

    .box .wbk .srk .s-button .jc{background:url(../img/bold.gif) no-repeat;}

    .box .wbk .srk .s-button .qx{background:url(../img/italic.gif) no-repeat;}

    .box .wbk .srk .s-button .syh{background:url(../img/syh.gif) no-repeat;}

    .box .wbk .srk .s-button .scx{background:url(../img/font.gif) no-repeat;}

    .box .wbk .srk .s-button .xhx{background:url(../img/u.gif) no-repeat;}

    .box .wbk .srk .s-button .dm{background:url(../img/file.gif) no-repeat; width:12px; height:14px;}

    .box .wbk .srk .s-button .tp{background:url(../img/p.gif) no-repeat; width:15px; height:14px;}

    .box .wbk .srk .button{width:100px; height:38px; text-align:center; float:right; position:relative; right:-2px; top:-44px;}

    .box .wbk .srk .button input{cursor: pointer;}

    .box .wbk .srk .button .tj-button{width:100px; height:38px; font:15px/38px "微软雅黑"; color:#ffffff; border:none; background:#48b913;}

    .box .add{width:300px; height:112px; position:relative; margin:30px 0 0 282px;}

    .box .add .text{width:216px; height:30px; border:2px solid #ccd4d9; margin-bottom:5px; font:13px/30px "微软雅黑"; color:#bba9bb;}

    .box .add .texts{width:216px; height:30px; border:none; background:none; font:13px/30px "微软雅黑"; color:#bba9a9; text-indent:6px;}

    .box .add .label{width:79px; height:112px; position:absolute; top:; right:; font:13px/37px "微软雅黑"; color:#777777;}

    .box .add .label .lab{text-indent:10px;}

JS：

                function change(x){document.getElementById(x).value = '';}

                function bold(){

                    var obj = document.getElementById('txtarea');

                    if(obj.style.fontWeight == ''|| obj.style.fontWeight == 'normal'){obj.style.fontWeight = 'bold';}

                    else{obj.style.fontWeight = 'normal';}

                }

                function italic(){

                    var obj = document.getElementById('txtarea');

                    if(obj.style.fontStyle == '' || obj.style.fontStyle == 'normal'){obj.style.fontStyle = 'italic';}

                    else{obj.style.fontStyle = 'normal';}

                }

                function linetrough(){

                    var obj = document.getElementById('txtarea');

                    var value = obj.style.textDecoration;

                    if(value == '' || value == 'none' || value == 'underline'){if(value == 'underline'){obj.style.textDecoration = 'line-through underline'}else{obj.style.textDecoration = 'line-through'};}

                    else{obj.style.textDecoration = 'none';}

                }

                function underline(){

                    var obj = document.getElementById('txtarea');

                    var value = obj.style.textDecoration;

                    if(value == '' || value == 'none' || value == 'line-through'){if(value == 'line-through'){obj.style.textDecoration = 'line-through underline'}else{obj.style.textDecoration = 'underline'};}

                    else{obj.style.textDecoration = 'none';}

                }

                function Quotes(){

                    var total = Handletext('txtarea').slice();

                    if(total.length == 1){total[0].innerHTML = total[0].innerHTML + '\"' + '\"' ;return;}

                    if(total.length > 1){total[0].innerHTML = total[1] + '\"' + total[2] + "\"" + total[3]}

                }

                function Handletext(x){

                    var obj = document.getElementById(x);

                    var selecttext = obj.innerHTML.substring(obj.selectionStart,obj.selectionEnd);

                    if(selecttext.length == 0){ var total = [obj];return total;}

                    var start = obj.innerHTML.indexOf(selecttext);

                    var end = start + selecttext.length;

                    var textlength = obj.innerHTML.length;

                    var starttext;

                    var endtext;

                    if(start > 0){starttext = obj.innerHTML.substring(0,start);}

                    else{starttext = '';}

                    if(textlength > end){endtext = obj.innerHTML.substring(end,obj.innerHTML.length);}

                    else{endtext = '';}

                    var total = [obj,starttext,selecttext,endtext];

                    return (total);

                }

很多地方都可以优化得更好，这里由于是之前的代码，就不进行优化了，代码质量随着学习的深入会越来越精简。

【原生JS】评论编辑器 文本操作的更多相关文章

  1. [笔记]原生JS实现的DOM操作笔记

    原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...

  2. 原生js封装table表格操作，获取任意行列td，任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  3. 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...

  4. 原生JS的对象常用操作总结

       前端时间写了篇怎么判断js对象相等的文章,一直在期待大神给点消息,无奈一直杳无音讯,还是自己写个函数来进行判断,下面总结一些常用的对象操作的方法.    咋们来个先抑后扬的方式,先放出几个基本的 ...

  5. 原生js动态创建文本内容的几种方式

    1.通过CreateTextNode文本节点 首先创建该元素(元素节点),然后向一个已存在的元素追加该文本节点 <!DOCTYPE html> <html> <body& ...

  6. 原生js实现复制文本到粘贴板

    项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...

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

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

  8. 原生js与jquery操作iframe

    1  原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frame ...

  9. 原生js 样式的操作整理

    内联样式的获取 function getStyle(obj,attr){//简单的获取内联样式 return obj.currentStyle?obj.currentStyle[attr]:obj.g ...

随机推荐

  1. chmod 777 修改权限之后,文件夹颜色变绿:解决方案

    修改前: 方法一: ls --color=none #不显示颜色 方法一修改后: 方法二:修改配色 ①安装git +++可用在windows下载之后用ftp传上去:http://pan.baidu.c ...

  2. Django项目：CRM(客户关系管理系统)--09--04PerfectCRM实现King_admin注册功能01

  3. PyCharm如何删除工程项目

    1.在菜单中选择:file——>close project 2.选择需要删除的项目右上角的“×”号进行删除工程项目 3.找到工程项目的存放路径,删除对应的工程项目文件 通过上诉操作即可在pych ...

  4. golang字符串常用系统函数

  5. 入职9月，旷视孙剑106分钟讲述CV创业科研的5大区别

    雷锋网按:本文为旷视科技首席科学家孙剑日前在 CCF-ADL上做的题为<如何在大公司和创业公司做好计算机视觉研究>的分享,主要介绍了近期计算机视觉的发展现状,ResNet基本原理和设计,旷 ...

  6. 项目ITP(七) javaWeb 整合 Quartz 实现动态调度 而且 持久化

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u010378410/article/details/36255511 项目ITP(七) javaWe ...

  7. Node.js模拟发起http请求从异步转同步的5种方法

    使用Node.js模拟发起http请求很常用的,但是由于Node模块(原生和第三方库)提供里面的方法都是异步,对于很多场景下应用很麻烦,不如同步来的方便.下面总结了几个常见的库API从异步转同步的几种 ...

  8. JS实现AES加密并与PHP互通的方法分析

    <script type="text/javascript" src="/CryptoJS/aes.js"></script><s ...

  9. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- Direct12优化

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- Direct12优化 第一章:向量代数 1.向量计算的时候,使用XMV ...

  10. 2019-3-13-win10-uwp-使用-ScaleTransform-放大某个元素

    title author date CreateTime categories win10 uwp 使用 ScaleTransform 放大某个元素 lindexi 2019-3-13 19:5:56 ...