关键字:CSS HTML javascript TEXTAREA 样式 字体 颜色
功能主治:改变TextArea的文字颜色(改背景颜色用不着这么复杂,直接用CSS可)
适用对象:IE浏览器,其它浏览器据说无效,没测试,不过已经用isIE过滤了
更多想象:是不是可以在TextArea里做更多东西,比如播放flash等,不过好象没什么用,TextArea嘛,是用来输东西的,不是用来看东西的。
以前做过:试图在Select对象中增加子对象,没成功,没想到TextArea倒是可以。
昨晚JYY问能不能改变留言框TextArea的字体颜色,最初上网查了一下,得到大概的信息说是做不到,后来偶然找到一个达人说可以利用IE的一个漏洞来实现(也不是什么漏洞,只是IE懒得区分与其它控件,让它可以象其它控件一样可以拥有child罢了)。
由于这里除了首页外不能直接支持javascript,所以必须写到CSS中,使用expression,是比较占资源的(IE的很多操作都会引发expression计算,象鼠标操作、滚屏、flash的播放头移动,差不多会动的东西除了gif图像不会触发expression计算外,其它的都会触发)。如果你的网页能够直接使用javascript,就不要写在CSS里面了,写在TextArea定义那里就行了。
完整的代码如下(是个CSS样式,将它加到自定义样式中就行了):
textarea{star : expression( window.setCaret = function(textbox,pos){var r = textbox.createTextRange(); r.collapse(true); r.moveStart('character',pos); r.select();}
, function ontextClick(){var o = event.srcElement; var h = o.innerHTML; if (h.indexOf('/FONT')==-1){var f = document.createElement('font'); f.style.color='#ff0000'; f.appendChild(document.createTextNode('')); o.appendChild(f); setCaret(o,0)}
}
, window.changeTextAreaStyle = function(){var e = event; var k = event.keyCode; if (k==8 || k==46 || k==9){var o = e.srcElement; var h = o.innerHTML; if (h.indexOf('/FONT')==-1){var f = document.createElement('font'); f.style.color='#ff0000'; f.appendChild(document.createTextNode('')); o.appendChild(f); setCaret(o,0)}
}
}
,this.onkeyup=(isIE?changeTextAreaStyle:null) ,this.onfocus=(isIE?ontextClick:null) )}
大概解释一下原理:TextArea在获得焦点的时候,给它设置一个子控件(设置文字颜色),就这么简单。不过还有段是处理如果将所有内容删除后(可能把给它设置的子控件也删了),重新设置一个。
如果你不想所有的TextArea都使用相同的样式,自己改一个样式名称就行了(也就是这里最前面的textarea).
注意:如果你在中国影视库博客外的地方用,请自己设置isIE变量,就是满街都是的检测是否为IE浏览器的变量。由于这里的通用脚本已经有了,就不用了,否则出错哦。
祝大家开心……
Something ends, something begins, and something never changes......