作者no1kk (心中在下雨)
看板Ajax
标题[问题] chrome 与 contenteditable
时间Thu May 23 15:24:13 2013
问题简述:
在 html 的 tag 加上属性 contenteditable="true"
可以让内容被使用者编辑
大部分的 inline editor plugin 也是利用此方式做到即时编辑的效果
但是，最近在做的专案发现在 chrome 下
点击了可被编辑的区块，看到有出现 focus 的外框变化
但是却没有输入文字的游标，而文字也无法被输入，亦无法选取
环境:
chrome 25
我做的是封闭式後台介面，chrome 25 是指定的浏览器 & 版本
过程:
经测试乾净的页面下没有问题，使用正常
在系统中使用 jsshell 执行以下程式，监测目前游标的位置
var tt = setInterval(function(){
var selection = window.getSelection();
var range = selection.getRangeAt(0);
console.log(selection);
console.log(range)
},1000);
$("body").keydown(function(){
clearInterval(tt);
});
一般情况下都抓到的 selection & range
但是当我点击了可编辑的区域，立即变成以下状态
selection.type = 'None'
selection.baseNode = null
range -> undefined
其他说明:
我只负责这个系统的 widget 部分
系统中用到的 js 不是我的管辖范围
(如果有需要也是能协调，只是负责的团队不在台湾所以可能会比较麻烦一点)
真的很不好意思，因为是封闭系统所以也无法提供页面给各位检视
不知能否提供可能的错误方向，或测试方向
或是有其他人也遇过这类问题，有解决的方式
感谢!!
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 61.219.35.100
自问自答...
後来发现因为某些原因，在基本的 css 添加了以下
body{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
造成无法选取的情况
解决方式也很简单，而且不干扰到原本的功能
添加以下css
#target{
-webkit-user-select: auto;
-khtml-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
#target 是目标范围以下要可以被选取
当然要用 class 也行，因为优先权都比 tagname 高
※ 编辑: no1kk 来自: 61.219.35.100 (05/24 12:05)
1F：推 b12031106:推解答 05/24 22:23
2F：推 dnzteeqrq:感应分享@@ 05/27 22:48
3F：推 tomap41017:推良好问题排版与解答！ 06/04 18:14