js如何实现选中文本后点击按钮变色

火星大能猫 2010-04-23 03:48:34

就像csdn发帖的一样
选中文本,然后点击相应的颜色按钮
选中的文本就会变成相应的颜色
怎么实现啊?
js或者jquery都可以.
document.selection.createRange().text="<font color='red'>不可以</font>"
这样不行.
不要复文本编辑器.
因为项目要控制文本在表格里输入的.
阿日前哦富文本功能太多了.我只要一个变色功能.

...全文

2222 32 打赏收藏转发到动态举报

写回复

用AI写文章

32 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhaohaishui2010 2012-11-02

打赏
举报

正好用上了！

simon_chou 2012-08-02

打赏
举报

ff下怎么实现跨标签选择的文字也能改变颜色呢？

hulunchi 2011-10-06

打赏
举报

正想提类似问题。学习了。

zhouzo 2011-05-19

打赏
举报

试一试25楼方法了。

Esakyo 2010-04-27

打赏
举报

每天回帖即可获得10分可用分！

火星大能猫 2010-04-27

打赏
举报

结贴,
Free_Wind22果然是个js高手啊.

囧 2010-04-26

打赏
举报

处理了下，不是选中editor中的内容就不会变色
else中的代码是为了兼容FF浏览器



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

    <title>new document</title>

    <script type="text/javascript">

    function setColor(){

        if(document.all){

            var tr = document.selection.createRange();

			if(tr.parentElement().id != "editor"){

				return;

			}

            tr.execCommand("ForeColor", false, "#FF0000");

        }else{

            var tr = window.getSelection().getRangeAt(0);

			if(tr.commonAncestorContainer.parentNode.id != "editor"){

				return;

			}

            var span = document.createElement("span");

            span.style.cssText = "color:#ff0000";

            tr.surroundContents(span);

        }

    }

    </script>

</head>

<body>

<div id="editor" contenteditable="true">fdjlksafjd;slafjd;slakfjds</div>

<div>123456</div>

<input type="button" onclick="setColor()" value="setColor" />

</body>

</html>

yingzhilian2008 2010-04-26

打赏
举报

up......

luohuayh 2010-04-26

打赏
举报

这个是个兼容程序，else后面是在FF下运行的，而你们说的不能运行那是你们没选中任何文字，所以看不到效果，其实7#的代码是正确和可行的

luohuayh 2010-04-26

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>new document</title>
<script type="text/javascript">
function setColor(){
if(document.all){
var tr = document.selection.createRange();
if(tr.text==""){alert("未选中任务文字！")};
tr.execCommand("ForeColor", false, "#FF0000");
}else{
var tr = window.getSelection();
if(tr==""){alert("未选中任务文字！")};
var rang=tr.getRangeAt(0);
var span = document.createElement("span");
span.style.cssText = "color:#ff0000";
tr.surroundContents(span);
}
}
</script>
</head>
<body>
<div>fdjlksafjd;slafjd;slakfjds</div>

<input type="button" onclick="setColor()" value="setColor" />
</body>
</html>

囧 2010-04-26

打赏
举报

[Quote=引用 18 楼 wukaiping870123 的回复:]
textbox的话怎么解决啊?
[/Quote]

textbox是不能变色的，可以给div加个属性contenteditable="true",让div的内容可编辑

火星大能猫 2010-04-26

打赏
举报

textbox的话怎么解决啊?

zhuyouyong 2010-04-26

打赏
举报

顶[Quote=引用 2 楼 cj205 的回复:]
1楼完全没有做到
首先选中文本，再次是处理选中的文本（不是一个text或者textarea哦）
我也想知道在没有兼容问题的情况下如何实现这个的。等待高人
[/Quote]

火星大能猫 2010-04-26

打赏
举报

[Quote=引用 19 楼 free_wind22 的回复:]
引用 18 楼 wukaiping870123 的回复:
textbox的话怎么解决啊?

textbox是不能变色的，可以给div加个属性contenteditable="true",让div的内容可编辑
[/Quote]
非常感谢.
if(document.all){
var tr = document.selection.createRange();
tr.execCommand("ForeColor", false, "#FF0000");
}else{
var tr = window.getSelection().getRangeAt(0);
var span = document.createElement("span");
span.style.cssText = "color:#ff0000";
tr.surroundContents(span);
}

这个else有什么用?
else感觉去掉也没有影响效果啊?
还有可否把选择区域限定在div里呢?
不然的话整个网页的字体颜色都可以改变了.
再次感谢.

passself 2010-04-25

打赏
举报

[Quote=引用 13 楼 rainsilence 的回复:]
Free_Wind22的正解。而且这段代码实用性非常强。
[/Quote]
你好，你试了吗？我在ff下是报错的，在ie下是没有效果的，不知道怎么回事

VirusFu 2010-04-25

打赏
举报

Free_Wind22
up

火星大能猫 2010-04-25

打赏
举报

[Quote=引用 7 楼 free_wind22 的回复:]
HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>new document</title>
<script type="text/javascript">
function setColor(){
if(……
[/Quote]

如果是textbox的话，执行没有效果。