如何用javascript实现对文本域加粗,斜体和下划线效果的设置
4个回答
展开全部
1、可以通过 style 让整个文本框内容加粗，但没有办法单独改变部分文字的样式。
2、下面的代码只是个例子，可以实现将选择的文本加粗，但实际应用中考虑的问题还有很多，IE 9, Firefox 19, Chrome 26 下测试都没有问题，Safari 会出现移位错误，Opera 直接不支持。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <script language="javascript">window.onload = function() { // iframe 窗口 var frameWin = document.getElementById('result').contentWindow; // iframe 页面 var frameDoc = frameWin.document; // 在 iframe 页面输出一些字符 frameDoc.body.innerHTML = 'Lorem ipsum dolor sit amet'; // 点击加粗 document.getElementById("bold").onclick = function() { // 获取选择 var sel = frameDoc.getSelection(); // 获取选择的文字 var txt = sel.getRangeAt(0).extractContents().textContent; // 选择范围 range = sel.getRangeAt(0); // 删除被选择的内容 range.deleteContents(); // 创建新的元素 strong var bold = frameWin.document.createElement("strong"); // 设置 strong 内容 bold.innerHTML = txt; // 在被选择的位置添加加粗的元素 range.insertNode(bold); };};</script> |
1 2 | <iframe style="width:600px; height:200px" id="result"></iframe><input type="button" id="bold" value="加粗" /> |
展开全部
要说明一点，textarea标签是纯文本编辑器，js是无法对其显示状态进行改变；
一般如果使用javascript对文本域的加粗，斜体等操作可以使用js模拟来实现，实现它代码量很多，如果是新手，建议使用第三方开源在线编辑器，比如说kindeditor，在线地址：http://kindeditor.net/，自己写一套这样的编辑器，除了需要精湛js技术，还需要大量时间。
展开全部
不用css是不可能的，即便是1楼回复的，也是js把css的内容直接以字符串的形式加进去了，如果一点css都不想用，哪楼主可以用<b><u><i>标签
解释 b标签，加粗
u标签，下划线
i标签，斜体
document.getElementById("test").innerHTML="<b><u><i>"+test+"</i></u></b>";
textarea 是不可以的。。。。除非你给这个框改样式。。。
解释 b标签，加粗
u标签，下划线
i标签，斜体
document.getElementById("test").innerHTML="<b><u><i>"+test+"</i></u></b>";
textarea 是不可以的。。。。除非你给这个框改样式。。。
展开全部
<html>
<head>
<script>
function boldTest(){
var test=document.getElementById("test").innerHTML;
document.getElementById("result").innerHTML="<b>"+test+"</b>";
}
function talicTest(){
document.getElementById("test1").style.fontStyle="italic";
}
function underLineTest(){
var test=document.getElementById("result1").innerHTML;
document.getElementById("result1").innerHTML="<span style='text-decoration:
underline'>"+test+"</span>";
}
</script>
</head>
<body>
<div id="test">testdafeq</div>
<div id="result"></div>
<div id="test1">testdafeq</div>
<div id="result1">ceshiafafdadf</div>
<input type='button'value="粗体测试"onclick="boldTest()">
<input type='button'value="斜体测试"onclick="talicTest()">
<input type='button'value="下滑线测试"onclick="underLineTest()">
</body>
</html>
<head>
<script>
function boldTest(){
var test=document.getElementById("test").innerHTML;
document.getElementById("result").innerHTML="<b>"+test+"</b>";
}
function talicTest(){
document.getElementById("test1").style.fontStyle="italic";
}
function underLineTest(){
var test=document.getElementById("result1").innerHTML;
document.getElementById("result1").innerHTML="<span style='text-decoration:
underline'>"+test+"</span>";
}
</script>
</head>
<body>
<div id="test">testdafeq</div>
<div id="result"></div>
<div id="test1">testdafeq</div>
<div id="result1">ceshiafafdadf</div>
<input type='button'value="粗体测试"onclick="boldTest()">
<input type='button'value="斜体测试"onclick="talicTest()">
<input type='button'value="下滑线测试"onclick="underLineTest()">
</body>
</html>
本回答被提问者采纳
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
