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

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

清晨说ぺ晚安 发布于 2017-01-27 字数 572 浏览 1114 回复 3

在用鼠标拖动选择网页内容时,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>

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

灵芸 2017-07-20 3 楼

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

我的方案大致如下:

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

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

灵芸 2017-07-14 2 楼

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

灵芸 2017-02-09 1 楼

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

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

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