• 【原生JS】评论编辑器 文本操作


    效果图:

    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:0;margin:0;}
        .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:0; right:0;}
        .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:0; right:0; 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);
                    }
                

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

    转载请指明出处!
  • 相关阅读:
    pagefile.sys
    Oracle数据库同义词
    oracle临时表
    修改Oracle并行度
    Oracle 反键索引/反向索引
    Ajax基础2
    DOM高级
    面向对象--高级
    面向对象---中级
    面向对象-初级
  • 原文地址:https://www.cnblogs.com/GruntFish/p/6689315.html
Copyright © 2020-2023  润新知