preventDefault does not work on focus event
<p>I am trying to design a form such that if it has a certain class, the user should not be able to interact with any of the inputs. For various reasons, I would like to avoid using the "disabled" attribute. I am trying to prevent the default on the focus event and it is not working. I tested this in recent versions of Firefox, Chrome, and Android. I tried various combinations of events, such as "click change touchstart focus focusin". I tried puting "return false;" in the handler. Does anyone know why this is happening and how to make it work?</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;&lt;head&gt;
&lt;title&gt;input test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form class="disabled"&gt;
  &lt;input type="text"&gt;
&lt;/form&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(".disabled :input").bind("focus", function(e) {
  e.preventDefault();
});
&lt;/script&gt;
&lt;/body&gt;&lt;/html&gt;
</code></pre>

<p>You can see an example at <a href="http://jsfiddle.net/54Xka/" rel="nofollow">http://jsfiddle.net/54Xka/</a></p>

<p><strong>EDIT:</strong> This will be on a site intended mostly for mobile browsers. I am planning to disable the inputs when a modal dialog is showing. The modal dialog is implemented using my own code. It is something very simple that shows and hides a div.</p>

<p><strong>EDIT 2:</strong> This is what I have now:</p>

<pre><code>$(".disabled :input").live({
  focus: function() {
    $(this).blur();
  },
  change: function(e) {
    e.preventDefault();
  }
});
</code></pre>

<p>It has some minor aesthetic issues but it works. When I have more time, I may try jfriend00's idea with the transparent gif, or something similar to what the jQuery UI dialog widget does, or maybe actually using the jQuery UI dialog widget to implement the dialog.</p>
