jQuery实现文本编辑特效

时间：2007-12-03 来源：hailingr

本文为转载。感谢原作者：http://www.dup2.org 记得两年前刚开始玩 flickr 的时候，贴心的使用体验一下子就征服了我。其中对一个更改照片主题的效果印象尤其深刻：鼠标移到照片的主题上，这条文本背景变成淡黄色；左键点击，文本变成输入框；输入新名字后回车，名字更改完毕。整个过程不像在操作网页，倒是像在使用文本编辑器。

由于对 html，javascript 所知甚少，隐藏在这神奇效果后面的技术令我叹服不止且念念不忘。随着后来看了一点点 Ajax 方面的东东，感觉到这应该是页面上的元素替换。这两天尝试了一下 jQuery，想起了这个当年让我耳目一新的页面效果，实现之：

$(document).ready( function() { //网页 ready 后加载此方法

    $('span[id=email]') //定位到<span id="email">元素

    .mouseover( function() { $(this).css("background-color",
"#ffff90") }) //鼠标移上<span id="email">元素后改其css里background-

color的值
    .mouseout( function() { $(this).css("background-color",
"white") }) //鼠标移离<span id="email">元素后改其css里background-

color的值
    .click( function() { //给<span id="email">元素绑定 click 事件

     var origEmail = $(this).text() //取得<span>元素包含的文本

     $(this).hide() //隐藏自身

     $('<input name="email" value="' + origEmail + '" type="text"/>') //创建

一个<input>元素其值为原来的 email
        .appendTo("div#email") //把该元素添加到<div id="email">中

        .focus() //把焦点移到该元素上

        .keydown( function(ev) { //绑定 keydown 事件

         if (ev.which == 13) { //回车的键盘 key code 为 13

            var email = $(this).val() //取出<input>元素此时的值

            $(this).remove() //移除该<input>元素

            $('span[id=email]').text(email).show() //显示

原来的<span>元素并将 email 添加其中
         }
        })
    })
})

上面的代码是精炼过的，本来面目可不是这样，花了许多时间 refine，将收获总结如下

1.用 hover 的方法可以替换 mouseover 和 mouseout，将两句话写在一句里面。但是在这个地方，hover 却还有些问题，input 变成 span 后，有时鼠标不在 span 上，它的背景色仍然是淡黄色（Fx 有此问题，IE 没有）

2.attr 修改属性的方法固然好，但是对于 style 属性因为 css 里面又有各种描述，所以 jQuery 做一个 css 方法不是白做的，理由见回复

3.在匿名函数里面，本元素用 $(this) 表示就 ok 了，没必要再用 selector 定位一次

4.span 在被 input 替换的时候，不用 remove，只用 hide 即可，到需要它的时候再 show 出来。这种方法明显对性能有好处，否则如果 remove 掉再 appendTo 进来时，还要重新绑定一系列事件响应函数

5.jQuery 的 API 文档里面对事件响应内的匿名函数的参数没有言及，它是可以传递参数的，代码里的 keydown 事件就传了 ev 进去

6.对于键盘响应的 key code，Fx 和 IE 支持的标准不同，网上的示例基本都是 key=window.event?ev.keyCode:ev.which 这样解决的。jQuery 包装了一层，所以在这里用 ev.which 即可

7.可以将 appendTo，keydown，focus 这些函数写在一条语句里面，不过保证性能的同时也要兼顾代码可读性