<?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>Codigo Manso &#187; cursor</title>
	<atom:link href="http://www.codigomanso.com/es/tag/cursor/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.codigomanso.com</link>
	<description>Programación, informática y tecnología</description>
	<lastBuildDate>Sun, 21 Aug 2011 10:54:29 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Donde está el cursor?</title>
		<link>http://www.codigomanso.com/es/2009/02/where-is-the-cursor-or-cursor-in-a-textarea-or-input/</link>
		<comments>http://www.codigomanso.com/es/2009/02/where-is-the-cursor-or-cursor-in-a-textarea-or-input/#comments</comments>
		<pubDate>Fri, 13 Feb 2009 09:13:28 +0000</pubDate>
		<dc:creator>Pau Sanchez</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Programacion]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[caret]]></category>
		<category><![CDATA[cursor]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.codigomanso.com/es/?p=548</guid>
		<description><![CDATA[Buscando y buscando, me acabo de encontrar con una web que tiene un ejemplo muy interesante y que nos dice dónde está el cursor en un input o textarea en cada momento, y además permite saber cual es el texto seleccionado (si es que lo hay).
La verdad es que no es algo que a uno [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://javascript.nwbox.com/cursor_position/" style="float:left; margin: 0 8px 4px 0;"><img src="http://www.codigomanso.com/wp-content/uploads/2009/02/where-is-the-cursor.png" alt="Where is the cursor?" title="Where is the cursor?" width="300" height="290" class="alignnone size-full wp-image-552" /></a>Buscando y buscando, me acabo de encontrar con una web que tiene un ejemplo muy interesante y que nos dice <a href="http://javascript.nwbox.com/cursor_position/">dónde está el cursor en un input o textarea en cada momento</a>, y además permite saber cual es el texto seleccionado (si es que lo hay).</p>
<p>La verdad es que no es algo que a uno le haga falta todos los días, pero a mi me hacía falta y me ha resuelto el problema.</p>
<p>En el ejemplo que hay en dicha página se usan las funciones <b>getSelectionStart</b> y <b>getSelectionEnd</b>. La primera nos dice donde está el cursor, mientras que la segunda nos dice dónde finaliza la selección (siempre y cuando getSelectionEnd devuelva un valor distinto a getSelectionStart).</p>
<p>A continuación teneis estas dos funciones:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> getSelectionStart<span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
 <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>o.<span style="color: #660066;">createTextRange</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #003366; font-weight: bold;">var</span> r <span style="color: #339933;">=</span> document.<span style="color: #660066;">selection</span>.<span style="color: #660066;">createRange</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">duplicate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   r.<span style="color: #660066;">moveEnd</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'character'</span><span style="color: #339933;">,</span> o.<span style="color: #660066;">value</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>r.<span style="color: #660066;">text</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> o.<span style="color: #660066;">value</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
   <span style="color: #000066; font-weight: bold;">return</span> o.<span style="color: #660066;">value</span>.<span style="color: #660066;">lastIndexOf</span><span style="color: #009900;">&#40;</span>r.<span style="color: #660066;">text</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
 <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">return</span> o.<span style="color: #660066;">selectionStart</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> getSelectionEnd<span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
 <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>o.<span style="color: #660066;">createTextRange</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
 <span style="color: #003366; font-weight: bold;">var</span> r <span style="color: #339933;">=</span> document.<span style="color: #660066;">selection</span>.<span style="color: #660066;">createRange</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">duplicate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 r.<span style="color: #660066;">moveStart</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'character'</span><span style="color: #339933;">,</span> <span style="color: #339933;">-</span>o.<span style="color: #660066;">value</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #000066; font-weight: bold;">return</span> r.<span style="color: #660066;">text</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #000066; font-weight: bold;">return</span> o.<span style="color: #660066;">selectionEnd</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.codigomanso.com/es/2009/02/where-is-the-cursor-or-cursor-in-a-textarea-or-input/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
	</channel>
</rss>

