JavaScript-鼠标拖动选取网页内容的问题

Question

在用鼠标拖动选择网页内容时，text文本框中的内容不会被选中，如下图所示：

下面代码如何修改才能实现一次性拖动选中整行文本内容？
<tr>
<td>889934</td>
<td>张三</td>
<td><input type="input" value="张三的昵称" name="name"/></td>
<td>男</td>
<td><input type="button" value="修改" onclick="changeNickName();"/>
</td>
</tr>

Answer 1

刚好前段时间完成了一个专门给朋友定制的对照翻译工具，有个需求与你这个差不多，不过那个是textarea标签，而您这个是input标签。

我的方案大致如下：

用以表单提交的input通过css设定为隐藏(display:hidden)
添加一个pre标签，用以编辑内容，并添加可编辑属性(contenteditable="true")
通过js将pre的值赋予input(可实时进行也可在keyup时进行)

这种方法简单快速适合于小范围使用；如果是大范围使用，可参考冯义军同学提供的思路，Google一下“Inplace Edit”即可获得不少答案，我个人惯用 Jeditable .

Answer 2

我举得你可能是想获得这一行的信息，其实你可以做一个excel表导出功能，或者存在页面的hidden里,用js打印出来，主要看你的需求。

Answer 3

如果真的想实现那就不要用文本框了，改为其他标签比如 <span>张三的昵称</span>

如果要修改昵称，在span标签上加点击或者双击事件，再将span动态的变成文本框，将span中的内容赋给 文本框的value.给文本框加blur事件，失去焦点时，再将文本框变成span,再判断值是否改变，如果改变了那么使用ajax修改该值，网上早已经有这样的插件了。应用也挺多的。

如果使用这样的方法就能解决你复制时的问题。