【原生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>评论 <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】评论编辑器 文本操作的更多相关文章
- [笔记]原生JS实现的DOM操作笔记
原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...
- 原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
- 原生JS的DOM节点操作
DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...
- 原生JS的对象常用操作总结
前端时间写了篇怎么判断js对象相等的文章,一直在期待大神给点消息,无奈一直杳无音讯,还是自己写个函数来进行判断,下面总结一些常用的对象操作的方法. 咋们来个先抑后扬的方式,先放出几个基本的 ...
- 原生js动态创建文本内容的几种方式
1.通过CreateTextNode文本节点 首先创建该元素(元素节点),然后向一个已存在的元素追加该文本节点 <!DOCTYPE html> <html> <body& ...
- 原生js实现复制文本到粘贴板
项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- 原生js与jquery操作iframe
1 原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frame ...
- 原生js 样式的操作整理
内联样式的获取 function getStyle(obj,attr){//简单的获取内联样式 return obj.currentStyle?obj.currentStyle[attr]:obj.g ...
随机推荐
- 引用CDN内容的方法总结
1.1.1 摘要 CDN相信大家都听说过,甚至使用过相关的技术,也许有些人会回答“没有听说过和使用过该技术”,真的是这样吗? CDN的全称是Content Delivery Network,即内容分发 ...
- JavaScript--location.href的跳转
页面重载 true 强制从服务器加载 false 优先从缓存加载 window.location.reload(true); window.location.href.self.location. ...
- hdu 4722 Good Numbers( 数位dp入门)
Good Numbers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tota ...
- 消息队列rabbitmq rabbitMQ安装
消息队列rabbitmq 12.1 rabbitMQ 1. 你了解的消息队列 生活里的消息队列,如同邮局的邮箱, 如果没邮箱的话, 邮件必须找到邮件那个人,递给他,才玩完成,那这个任务会处理的很麻 ...
- 注解1 --- JDK内置的三个基本注解 --- 技术搬运工（尚硅谷）
@Override: 限定重写父类方法, 该注解只能用于方法 @Deprecated: 用于表示所修饰的元素(类, 方法等)已过时.通常是因为所修饰的结构危险或存在更好的选择 @SuppressWar ...
- 设置程序PrivatePath，配置引用程序集的路径（分离exe和dll）
原文:设置程序PrivatePath,配置引用程序集的路径(分离exe和dll) 有时候我们想让程序的exe文件和dll文件分开在不同目录,这时候可以有3种方法 1.在app.config中配置 &l ...
- ENSP 安装后，启动路由器提示错误41
ENSP 安装后,启动路由器提示错误41 环境: 安装的软件清单: VirtualBox-5.2.28-130011-Win.exe WinPcap_4_1_3.exe Wireshark-x64-3 ...
- 【JZOJ4858】【GDOI2017模拟11.4】Walk
题目描述 在比特镇一共有n 个街区,编号依次为1 到n,它们之间通过若干条单向道路连接. 比特镇的交通系统极具特色,除了m 条单向道路之外,每个街区还有一个编码vali,不同街区可能拥有相同的编码.如 ...
- Nginx教程(五) Nginx配置文件详解 （转）
一. Nginx配置文件nginx.conf中文详解 #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processe ...
- Leetcode824.Goat Latin山羊拉丁文
给定一个由空格分割单词的句子 S.每个单词只包含大写或小写字母. 我们要将句子转换为 "Goat Latin"(一种类似于 猪拉丁文 - Pig Latin 的虚构语言). 山羊拉 ...