需要实现：在光标位置处插入文字，以及获取焦点后光标位置处于文字末尾。
以前一直没有做过，今天了解了一下后实现并记录在此。
各浏览器TextArea获得焦点后的光标位置情况：
textarea.focus()
- FireFox: 所有文字结束处
- IE: 文字开头
- Opera: 文字开头
- Chrome: 文字开头
- Safari: 文字开头
IE支持document.selection
Firefox，Chrome,Safari以及Opera都有selectionStart和selectionEnd属性
针对浏览器的特性进行判断并实现，代码如下：
function insertText(obj,str) {
obj.focus();
if (document.selection) {
var sel = document.selection.createRange();
sel.text = str;
} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
var startPos = obj.selectionStart,
endPos = obj.selectionEnd,
cursorPos = startPos,
tmpStr = obj.value;
obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
cursorPos += str.length;
obj.selectionStart = obj.selectionEnd = cursorPos;
} else {
obj.value += str;
}
}
function moveEnd(obj){
obj.focus();
var len = obj.value.length;
if (document.selection) {
var sel = obj.createTextRange();
sel.moveStart('character',len);
sel.collapse();
sel.select();
} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
obj.selectionStart = obj.selectionEnd = len;
}
}
Demo猛击这里
关于IE TextRange 对象的方法与属性介绍：
http://msdn.microsoft.com/zh-cn/library/ms535872%28en-us,VS.85%29.aspx
TextArea对象的属性：
https://developer.mozilla.org/en/DOM/TextArea
示例
解决方法
直接看代码吧：
function Dialog(){
this.panel = document.createElement('div');
this.panel.id = 'bmPanel';
this.panel.style.position = 'absolute';
this.panel.style.right = '0px';
this.panel.style.right = this.scrollTop() + 'px';
this.panel.style.zIndex = 100000;
this.panel.style.margin = '10px';
this.panel.style.width = '200px';
this.panel.style.height = '200px';
this.panel.style.border = '5px solid #CCC';
this.panel.innerHTML = '<iframe id="bmIframe" '
+ 'token="1" onload="c = this.getAttribute(\'token\'); if (c==3) {this.parentNode.parentNode.removeChild(this.parentNode)} this.setAttribute(\'token\',++c);"'
+ 'name="bmIframe" src="main.html" scrolling="no" frameborder="0" style="width:100%; height:100%; '
+ 'border:1px; padding:0px; margin:0px"></iframe>';
}
Dialog.prototype.show = function(){
document.body.appendChild(this.panel);
}
Dialog.prototype.scrollTop = function (){
return document.documentElement && document.documentElement.scrollTop || document.body.scrollTop;
}
注意iframe这一行：
onload="c = this.getAttribute(\'token\'); if (c==3) {this.parentNode.parentNode.removeChild(this.parentNode)} this.setAttribute(\'token\',++c);"
iframe里的关闭按钮链接一个简单的页面，通过不停地提交表单触发load事件，让token累加：
<body onload="document.getElementById('close').submit()">
<form id="close" action="closeing.html" method="get"></form>
</body>
一直郁闷嘀咕网没有开发JS的博客插件，今天终于看到这款APP出来啦，嘀咕秀：http://www.digushow.com。
一共提供了三种Widget，Flash版的，图片版，以及JS版。
图片版一般是用于论坛签名，效果如下：
其实，任何支持HTML代码，或者支持图片的地方，都可以加上你的图片签名，如果你要在你的网页中插入图片签名，只需要添加如下代码：
<img src="http://digushow.com/sign/foxling/bbs_sign.png" alt="Foxling's digu" />
其中，foxling改为你的用户名，alt的属性改成你的说明。
如果是要在支持UBB代码的论坛里做签名，使用下面的代码：
[img]http://digushow.com/sign/foxling/bbs_sign.png[/img]
阅读全文 »
Yahoo!曾经针对网站速度体验提出了34条准则《Best Practices for Speeding Up Your Web Site》(中文译文)。
YSlow在这些准则的基础上精简为更加直观的13条，针对每一条从A-F评分，得出一个总分，来评估一个网站的优化程度，你可以很方便地从YSlow的测试结果中看到你得不足的地方，并加以改进。
YSlow是FireBug的一个插件，在FireFox里使用。
本站测试结果截图如下：
由于加入了Google统计和Yahoo统计的JS代码，所以Http请求较多，并且，它们的JS代码是没有加上Expires的，所以，在1\3\9\10几个项目中拖下了不少分数~
阅读全文 »
目的：
对图片进行90、180、270度的旋转，便于浏览照片。
实现方法：
1.IE浏览器，使用BasicImage滤镜
filter : progid:DXImageTransform.Microsoft.BasicImage ( enabled=bEnabled ,
grayScale=bGray , mirror=bMirror , opacity=fOpacity , XRay=bXRay )
Rotation:可读写。整数值(Integer)。设置或检索对象内容的旋转。0 | 1 | 2 | 3
- 0:默认值。内容不旋转。
- 1:内容旋转90度。
- 2:内容旋转180度。
- 3:内容旋转270度。
_this._img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation='
+ _this.r + ')';
2.其它标准浏览器(FireFox,Chrome,Safari,Opera)都支持Canvas，利用Canvas的rotate以及drawImage对图片进行旋转。
mozilla的Canvas文档：https://developer.mozilla.org/En/Canvas_tutorial
阅读全文 »
