Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

模拟浏览器地址栏的操作效果

  前几天的文章喷了一下各大网站对文本框用户体验的细节处理。它们都是图样图森破,那样的用户体验实在是蛋疼!文章最后提到了最佳效果,也就是浏览器对地址栏这个文本框所做的体验效果。现在,咱就在普通的文本框上也来模拟一下这个最佳效果。
  首先,我们要通过用户的操作来判断用户是想重新输入内容还是想修改原来的内容。如果用户是直接对文本框选中部分文字的,那一定是想修改部分内容,此时我们当然不能把文本框的内容全选了,甚至还要对某些浏览器本身存在的文本框行为BUG(主要指火狐的拖动BUG)做一些处理来方便用户操作。如果用户只是对一个无焦点的文本框做普通的点击,那就无法判断用户是想插入内容还是想重新输入内容了。一般把它当做用户想重新输入内容,从而为用户自动全选。如果用户只是想插入内容而不是要重新输入也只需要再次点击鼠标,重新移动光标到需要的位置即可。
<input id="input" />
<script>
(function(){
  var state; //用来标识用户操作前的文本框状态
  input.onmousedown=function(){
    //如果鼠标点击之前文本框已经是焦点状态
    //则把state标识为true,并跳过后面的操作
    if(state=this==document.activeElement)return;
    //这可以破坏上一次的选区,以防止Firefox中产生拖动行为
    input.selectionStart=input.selectionEnd;
  };
  input.onmouseup=function(){
    //如果鼠标点击之前文本框已经是焦点了则不做任何操作
    if(state)return;
    //如果用户的操作是一个选区,也不做任何操作
    //低版本IE不支持INPUT的selection,需要使用range判断
    if(document.selection
      ?document.selection.createRange().text
      :input.selectionStart!=input.selectionEnd
    )return;
    //全选文本框内的文字
    input.select();
  }; 
})();
</script>
  这个演示代码为了方便直接使用了DOM0的事件绑定,在实际项目中最好别这么用。这个代码可以兼容到低版本IE,关于低版本IE的selection和range对象可以参考之前的文章。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^