<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>FoxLing - 前端开发 &#187; moveEnd</title>
	<atom:link href="http://foxling.org/tag/moveend/feed/" rel="self" type="application/rss+xml" />
	<link>http://foxling.org</link>
	<description>我还在寻找方向</description>
	<lastBuildDate>Tue, 10 Apr 2012 16:48:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>TextArea光标位置插入文字</title>
		<link>http://foxling.org/js-ajax-dom/cross-browser-cursor-position-in-textarea/</link>
		<comments>http://foxling.org/js-ajax-dom/cross-browser-cursor-position-in-textarea/#comments</comments>
		<pubDate>Thu, 04 Feb 2010 07:06:03 +0000</pubDate>
		<dc:creator>FoxLing</dc:creator>
				<category><![CDATA[JS/AJAX/DOM]]></category>
		<category><![CDATA[moveEnd]]></category>
		<category><![CDATA[moveStart]]></category>
		<category><![CDATA[selection]]></category>
		<category><![CDATA[selectionEnd]]></category>
		<category><![CDATA[selectionStart]]></category>
		<category><![CDATA[TextArea]]></category>
		<category><![CDATA[光标位置]]></category>

		<guid isPermaLink="false">http://foxling.org/?p=439</guid>
		<description><![CDATA[需要实现：在光标位置处插入文字，以及获取焦点后光标位置处于文字末尾。 以前一直没有做过，今天了解了一下后实现并记录在此。 各浏览器TextArea获得焦点后的光标位置情况： textarea.focus() FireFox: 所有文字结束处 IE: 文字开头 Opera: 文字开头 Chrome: 文字开头 Safari: 文字开头 IE支持document.selection Firefox，Chrome,Safari以及Opera都有selectionStart和selectionEnd属性 针对浏览器的特性进行判断并实现，代码如下： function insertText(obj,str) { if (document.selection) { var sel = document.selection.createRange(); sel.text = str; } else if (typeof obj.selectionStart === 'number' &#038;&#038; typeof obj.selectionEnd === 'number') { var startPos = obj.selectionStart, endPos = obj.selectionEnd, cursorPos = startPos, tmpStr = [...]]]></description>
			<content:encoded><![CDATA[<p>需要实现：在光标位置处插入文字，以及获取焦点后光标位置处于文字末尾。<br />
以前一直没有做过，今天了解了一下后实现并记录在此。</p>
<p>各浏览器TextArea获得焦点后的光标位置情况：</p>
<pre>textarea.focus()</pre>
<ul>
<li>FireFox: 所有文字结束处</li>
<li>IE: 文字开头</li>
<li>Opera: 文字开头</li>
<li>Chrome: 文字开头</li>
<li>Safari: 文字开头</li>
</ul>
<p>IE支持document.selection<br />
Firefox，Chrome,Safari以及Opera都有selectionStart和selectionEnd属性<br />
针对浏览器的特性进行判断并实现，代码如下：</p>
<pre>
function insertText(obj,str) {
	if (document.selection) {
		var sel = document.selection.createRange();
		sel.text = str;
	} else if (typeof obj.selectionStart === 'number' &#038;&#038; 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' &#038;&#038; typeof obj.selectionEnd == 'number') {
		obj.selectionStart = obj.selectionEnd = len;
	}
}
</pre>
<p><a href="/examples/cursor_position_in_textarea/index.html">Demo猛击这里</a></p>
<p>关于IE TextRange 对象的方法与属性介绍：<br />
<a href="http://msdn.microsoft.com/zh-cn/library/ms535872%28en-us,VS.85%29.aspx" target="_blank">http://msdn.microsoft.com/zh-cn/library/ms535872%28en-us,VS.85%29.aspx</a></p>
<p>TextArea对象的属性：<a href="https://developer.mozilla.org/en/DOM/TextArea" target="_blank">https://developer.mozilla.org/en/DOM/TextArea</a></p>
]]></content:encoded>
			<wfw:commentRss>http://foxling.org/js-ajax-dom/cross-browser-cursor-position-in-textarea/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

