prototype里Form.Element.focus(element) 方法是否实现异常

2012-11-23

prototype里Form.Element.focus(element) 方法是否实现错误？今天上午没事做，在公司拿着买到的 prototype

prototype里Form.Element.focus(element) 方法是否实现错误？
今天上午没事做，在公司拿着买到的 <<prototype与script.aculo.us终极揭秘>>一书看，无意中发现了一个比较有趣的问题，不知道是不是 prototype.js自己的bug，拿上来让各位鉴定一下。
参照prototype.js的官方的api文档，Form.Element.focus(element) -> HTMLElement,他的意思应该是调用这个focus()方法之后返回的是应该是一个被prototye扩张的 HTMLElement,然后可以拿着返回的对象可以继续进行链式调用。可事实上并非如此。我自己测试了一把。下面的代码给的不全。要测试的话需要自己补全。

 <script type="text/javascript">        function test_focus(){    $("clickme").observe("click",function(){alert(Object.isString(Form.Element.focus('username')))Form.Element.focus('username').disable().setValue("hahahaha");      });}        document.observe("dom:loaded",test_focus)  </script>  <body>    <form id="login">    username : <input type="text" id="username" value="hehehehe"><br>password : <input type="text" id="password"><br><input type="button" value="click me" id="clickme"><br>    </form>   </body>

上面的代码运行到alert()部分的时候，会提示true，也就是说他返回的是一个String,然后会报出一个Form.Element.focus("username").disable is not a function的错误。

查看prototype.js的源代码，我们看到这个方法的定义，他其实就是直接返回了传进去的element，根本就没做扩展，所以所谓的链式编程到这里就不能继续下去了。

  Form.Element = {      focus: function(element) {      $(element).focus();      return element;   },  select: function(element) {    $(element).select();    return element;  } };

我直接把它hack掉之后上面的代码就可以正常运行了

  Form.Element = {      focus: function(element) {      $(element).focus();      return $(element);   },  select: function(element) {    $(element).select();    return $(element);  } };

我不知道这是不是prototype.js的bug，我这样的修改也只能说能测试通过我写的demo，所以拿出来供大家谈论一下。

setValue: function(element, value) { element = $(element); var method = element.tagName.toLowerCase(); Form.Element.Serializers[method](element, value); return element; },

<script src="prototype-1.6.0.3.js" type="text/javascript"> </script><script type="text/javascript">           function test_focus()   {       $("clickme").observe("click",function(){       //alert(Object.isString(Form.Element.focus('username')))       Form.Element.disable('username');    Form.Element.setValue('username',"hahahaha");         });      }          document.observe("dom:loaded",test_focus)    </script>    <body>      <form id="login">       username : <input type="text" id="username" value="hehehehe"><br>   password : <input type="text" id="password"><br>   <input type="button" value="click me" id="clickme"><br>      </form>     </body>

activate: function(element) { element = $(element); try { element.focus(); if (element.select && (element.tagName.toLowerCase() != 'input' || !['button', 'reset', 'submit'].include(element.type))) element.select(); } catch (e) { } return element; }

热点排行

Web前端

prototype里Form.Element.focus(element) 方法是否实现异常