Question

用JS怎么实现一个把一个文本框中的选中内容加粗，效果基本上和编辑器的加粗效果相同。急需。

<div style="width:600px;height:200px;float:right">

<iframe style="width:600px;height:200px" id="result">

</iframe>
这是一个可以编辑的iframe

<script language="javascript">
function setVal() {
var str = document.getElementById('result').contentWindow.document.getSelection().toString();
document.getElementById('result').replace();
</script>

得到iframe中鼠标选中的内容。怎么把这个选中的内容加粗。没选的内容不变，据说可以用replace方法。但是我不知道怎么用。。求指导

Answer 1

像 yanzilisan183 说的，你可以通过 style 让整个文本框内容加粗，但没有办法单独改变部分文字的样式。不过在你的例子中并没有出现 textarea，而是一个 iframe。

下面的代码只是个例子，可以实现将选择的文本加粗。但实际应用中考虑的问题还有很多。

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>
<br /><input type="button" id="bold" value="加粗" />

Answer 2

文本框是不支持富格式的,你只能改变文本框中所有内容的显示样式,而不能只修改选中的部分.
编辑器用的即不是input type="text"也不是textarea,因为这两种控件都不支持富格式文本.
所以,没有代码能像你所想的只给文本框中选中的部分加粗.