如何用javascript实现对文本域加粗,斜体和下划线效果的设置

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用javascript实现对文本域加粗,斜体和下划线效果的设置相关的知识，希望对你有一定的参考价值。

最好能有个实例,说明:不是用CSS,而是用js进行设置.等高手帮忙...

1、可以通过 style 让整个文本框内容加粗，但没有办法单独改变部分文字的样式。

2、下面的代码只是个例子，可以实现将选择的文本加粗，但实际应用中考虑的问题还有很多，IE 9, Firefox 19, Chrome 26 下测试都没有问题，Safari 会出现移位错误，Opera 直接不支持。

<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>

<iframe style="width:600px; height:200px" id="result"></iframe>
<input type="button" id="bold" value="加粗" />

 参考技术A 不用css是不可能的，即便是1楼回复的，也是js把css的内容直接以字符串的形式加进去了，如果一点css都不想用，哪楼主可以用<b><u><i>标签

解释 b标签，加粗
u标签，下划线
i标签，斜体

document.getElementById("test").innerHTML="<b><u><i>"+test+"</i></u></b>";

textarea 是不可以的。。。。除非你给这个框改样式。。。 参考技术B

    要说明一点，textarea标签是纯文本编辑器，js是无法对其显示状态进行改变；

    一般如果使用javascript对文本域的加粗，斜体等操作可以使用js模拟来实现，实现它代码量很多，如果是新手，建议使用第三方开源在线编辑器，比如说kindeditor，在线地址：http://kindeditor.net/，自己写一套这样的编辑器，除了需要精湛js技术，还需要大量时间。

 参考技术C <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>本回答被提问者采纳

如何用java实现文本域滚动条

如何用java实现文本域滚动条

需要javax.swing里面的JScrollPane组件 。
例子如下：
import javax.swing.*;
public class TestScroll
public TestScroll()
JFrame jf=new JFrame("test");

JPanel jp=new JPanel();
JTextArea jta=new JTextArea(8,20);
JScrollPane jsp=new JScrollPane(jta);
//新建一个滚动条界面，将文本框传入
jp.add(jsp);//注意：将滚动条界面添加到组建中。
而不是添加文本框了
jf.add(jp);

jf.pack();
jf.setLocation(300,300);
jf.setVisible(true);
jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

public static void main(String[] args)
new TestScroll();

 参考技术A JScrollPane sp=new JScrollPane（jtextarea，width，height）

以上是关于如何用javascript实现对文本域加粗,斜体和下划线效果的设置的主要内容，如果未能解决你的问题，请参考以下文章

如何用JavaScript控制当文本域失去焦点字体颜色为灰色!获取焦点输入的字颜色为黑色！

文本域输入汉字 第二个文本域立即显示汉字的获取首个字母 如何用JS实现

如何将粗体和斜体应用于NSMutableAttributedString范围？

php如何生成加粗或者斜体的文字样式图片

斜体加粗英语字母怎么打？

HTMLHTML 标签 ③ ( 文本格式化标签 | 加粗 | 斜体 | 下划线 | 删除线 | 标签属性 | 图像标签 | 图像标签属性 )