Tag: contenteditable

检测浏览器是否支持contentEditable？: 有这个问题，但发布的解决方案是浏览器嗅探，我试图避免。我需要让我的网站与iPad以及更新的Androids兼容。我一直在为我的WYSIWYG编辑器使用旧版本的FCKEditor（现在的CK编辑器），但是这不适用于移动设备，所以我想将它换成简单的textarea，如markdown，如果不支持的话。据说它不起作用，因为移动设备往往不支持此contentEditable属性，这意味着单击它时屏幕键盘不会弹出。如何检测浏览器是否支持contentEditable ？有人建议我用mydiv.contentElement === undefined或类似的东西检查有问题的div，但div（如果它使用的是）都内置在FCK编辑器中并埋在iframe中。是否有其他方法可以检测浏览器是否支持contentEditable ？试过这个： var contentEditableSupport = typeof $(”)[0].contentEditable !== ‘undefined’; 在我的iPad上说“真实”……我认为不应该这样。编辑：它返回“字符串”，因为所有属性都是字符串….它只是读取属性。我该怎么办呢？

在contenteditable中替换特定单词: 我有一个满足的div 我需要从插入位置得到最后一个字，在某些情况下我必须测试并删除这个特定的字。以下是我的表现 $(‘#divTest’).on(‘keyup focus’, function (e) { if (e.keyCode == 32) { var lastWord = getWordPrecedingCaret(this), spanLastWord = $(‘#lastWord’); } }); function getWordPrecedingCaret(containerEl) { var preceding = “”, sel, range, precedingRange; if (window.getSelection) { sel = window.getSelection(); if (sel.rangeCount > 0) { range = sel.getRangeAt(0).cloneRange(); range.collapse(true); range.setStart(containerEl, 0); preceding = range.toString(); } } else […]

如果我对一个可疑项目进行“jquery sortable”，那么我就无法将鼠标聚焦在任何可疑文本中的任何地方了: 奇怪的是，这只在Firefox和Opera中被破解（IE，Chrome和Safari可以正常工作）。有关快速修复的建议吗？ $(document).ready(function(){ $(‘#sortable’).sortable(); }); One apple Two pears Three oranges

可信的div中的HTML5可拖动元素 – 在第一次掉落后停止工作 – 为什么？: 我正在尝试创建一些可拖动的元素（标记），可以在一个可信的div中拖动。似乎一切都在工作，除了……在我拖动一个元素然后放下它之后，我再也无法拖动它了。似乎我再也无法绑定它的dragstart事件了。知道为什么会这样，我该如何解决？这是我小提琴的链接： http ： //jsfiddle.net/gXScu/1/ HTML： Testime siinkohal seda, et kuidas on võimalik asja testida. Token Token 2 Javascript（jQuery） var bindDraggables = function() { console.log(‘binding draggables’, $(‘.draggable’).length); $(‘.draggable’).off(‘dragstart’).on(‘dragstart’, function(e) { if (!e.target.id) e.target.id = (new Date()).getTime(); e.originalEvent.dataTransfer.setData(‘text/html’, e.target.outerHTML); console.log(‘started dragging’); $(e.target).addClass(‘dragged’); }).on(‘click’, function() { console.log(‘there was a click’); }); } $(‘#editor’).on(‘dragover’, function […]

execCommand后返回焦点到contenteditable？: 我有以下代码演示contenteditable属性和一个按钮，将粗体文本注入带有contenteditable区域的段落。我的问题是如何将焦点返回到我在单击粗体后停止的位置，如果突出显示某些文本，然后单击粗体，则会将这些文本加粗，但焦点将不再存在。如果您没有选择任何内容并单击粗体，焦点将消失，如果您再次单击中断的位置，则可以输入粗体文本。非常感谢您的帮助！ #container{ width:500; } .handle{ float:left; } $(function(){ $(‘#bold’).click(function (){ document.execCommand(‘bold’, false, true); }); }); Bold Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as Some text here asdf asdf asdf […]

contentEditable字段，用于在数据库输入时维护换行符: 我有一个div属性contentEditable设置。这允许我有一个自由格式的可编辑textarea，而不需要任何表单输入字段： http ： //jsfiddle.net/M8wx9/8/ 但是，当我创建几个新行并单击“保存”按钮时，我使用.text()方法获取内容，该方法继续删除我刚刚输入的换行符。如果可能的话，我需要维护换行符，并将内容作为纯文本存储在数据库中。我可以使用.html()而不是.text()将HTML直接存储到数据库中，但我不喜欢这个想法，因为我可能需要将此数据提取为未来的纯文本。此外，在Firefox中按Enter键会打破新的行，Chrome和Safari正在打破 … ，Internet Explorer和Opera正在使用段落 … 线条，所以听起来很难解析html。如何保留这些换行符并将内容作为纯文本存储在数据库中（类似于textarea的方式）？最诚挚的问候， ns

满足的事件 – Jquery: 我在表格中添加了contenteditable prop。我使用keydown事件获取数据，当用户点击“Enter”时，它会获取新输入并模糊区域。但是用户也可以点击输入区域以外的任何地方来模糊。（这是令人满意的function）。我不能听这个动作。如何为此操作创建keydown等事件侦听器。这适用于“输入”，但不适用于点击 col1 col2 col3 #1 Editable1 Editable2 $(‘#table tbody tr’).keydown(function (event){ enter = event.which == 13, el = event.target; if(enter){ el.blur(); console.log(“entered”); console.log($(this).find(‘:nth-child(2)’).html()); console.log($(this).find(‘:nth-child(3)’).html()); } });

jquery contenteditable linebreak: 我有一个内容可编辑区域，我正在尝试禁用输入/返回并从输入创建一个新段落，我使用下面的脚本，但它一起禁用按钮，我想做的是返回只是放置换行符然后转到新段落。 $(“#content”).keypress(function(e) { return e.which != 13; }); 所有帮助赞赏！干杯， Wazza

ContentEditable div – 第一个’x’字符后面的所有HTML: 我一直在研究一个可聚合的div，当我超过定义的最大长度时，我会突出显示文本。 Codepen在这里： http ：//codepen.io/doublesidedstickytape/pen/NqBMXR 它运行正常 – 除非用户按Return键 – 然后它会中断！我想我可以在第一个[x]数量的字符之后获得所有HTML内容，然后循环遍历每个元素（充当新行） – 在我隐藏的div中包围一个高亮类。我不知道如何实现这个目标。 HTML JS $(document).on(“keyup”, “div.editable”, function(event) { // GOOD TO STORE THIS IN A VAR // PREVENTS THE BROWSER HAVING TO // FIGURE OUT WHAT $(this) IS // EACH TIME YOU CALL IT var element = $(this); // KEYUP if (event.type == “keyup”) […]

在doubleclick上满足: 我有一个带有一些文字的p标签，我试图让它contenteditable但只有双击。当我点击它时，如何防止浏览器将光标放在p上，只有在我双击时才这样做？ JQuery的： p.dblclick(function(e){ p.css(“cursor”, “text”); }) .focusout(function(){ p.css(“cursor”, “default”); }) .click(function(e){ console.log(‘focus p’); e.stopPropagation(); $(“body”).focus(); // not stopping Chrome from placing cursor }); 我可以在默认情况下使contenteditable false，然后在dbleclick其设置为true然后执行p.focus()但这意味着我无法将光标放在我单击的位置。另一方面，我可以在第一次点击之后使其满足，然后等待1.5s以进行dobuleclick并且如果没有发生取消它，但如果它发生了，那么内容将是可编辑的并且第二次点击将触发将光标放在正确的位置。然而，它不是那么平滑，并且使这些内容可以在这些1秒半内编辑。有任何想法吗？回答：如果有人感兴趣，我继续实施计时器方法，因为我认为没有其他办法…这里是代码 var DELAY = 700, clicks = 0, timer = null; p.focusout(function(){ p.css(“cursor”, “default”); p.prop(“contenteditable”, false); }) .click(function(e){ clicks++; p.prop(“contenteditable”, true); if(clicks == 1){ timer = […]