<?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>Usingnamespace - Blog &#187; Javascript</title>
	<atom:link href="http://www.usingnamespace.org/tag/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://www.usingnamespace.org</link>
	<description>C#, XUL, Javascript, C++ ...</description>
	<lastBuildDate>Tue, 17 Jul 2012 14:53:13 +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>[XUL] Limit the number of characters in tree edit mode</title>
		<link>http://www.usingnamespace.org/xul-limit-chars-tree-edit.html</link>
		<comments>http://www.usingnamespace.org/xul-limit-chars-tree-edit.html#comments</comments>
		<pubDate>Fri, 16 Jul 2010 06:31:09 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[XUL]]></category>
		<category><![CDATA[characters]]></category>
		<category><![CDATA[edit mode]]></category>
		<category><![CDATA[editing]]></category>
		<category><![CDATA[limit]]></category>
		<category><![CDATA[tree]]></category>

		<guid isPermaLink="false">http://www.usingnamespace.org/?p=280</guid>
		<description><![CDATA[Unfortunately, there are no &#171;&#160;clean&#160;&#187; way to limit the maximum number of characters (or more generally apply constraints) in edit mode of a tree, unlike textbox elements.
Here is the trick : the oninput event of a tree is only fired when you are editing : 
Short tree example (limiting max number of characters to 10):

&#60;tree [...]]]></description>
			<content:encoded><![CDATA[<p>Unfortunately, there are no &laquo;&nbsp;clean&nbsp;&raquo; way to limit the maximum number of characters (or more generally apply constraints) in edit mode of a tree, unlike textbox elements.</p>
<p>Here is the trick : the <a href="https://developer.mozilla.org/en/XUL/Attribute/oninput">oninput</a> event of a tree <strong>is only fired when you are editing</strong> : </p>
<p><u>Short tree example (limiting max number of characters to 10):</u></p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;tree</span> <span style="color: #000066;">hidecolumnpicker</span>=<span style="color: #ff0000;">&quot;true&quot;</span> <span style="color: #000066;">minwidth</span>=<span style="color: #ff0000;">&quot;100px&quot;</span> <span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;300&quot;</span> <span style="color: #000066;">editable</span>=<span style="color: #ff0000;">&quot;true&quot;</span> <span style="color: #000066;">flex</span>=<span style="color: #ff0000;">&quot;1&quot;</span> </span>
<span style="color: #009900;"> <span style="color: #000066;">oninput</span>=<span style="color: #ff0000;">&quot;event.originalTarget.value = event.originalTarget.value.substring(0,10);&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;treecols<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;treecol</span> <span style="color: #000066;">primary</span>=<span style="color: #ff0000;">&quot;true&quot;</span> <span style="color: #000066;">flex</span>=<span style="color: #ff0000;">&quot;1&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/treecols<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;treechildren</span> <span style="color: #000066;">context</span>=<span style="color: #ff0000;">&quot;&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;treeitem<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;treerow<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;treecell</span> <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;joe@somewhere.com&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/treerow<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/treeitem<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;treeitem<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;treerow<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;treecell</span> <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;mel@whereever.com&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/treerow<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/treeitem<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/treechildren<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tree<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.usingnamespace.org/xul-limit-chars-tree-edit.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
