在 Firefox 中使用 contentEditable 时,有没有办法防止用户通过按 enter 或 shift+enter 来插入段落或换行符?
11 回答
您可以将事件处理程序附加到 contentEditable 字段的 keydown 或 keypress 事件,如果 keycode 将自身标识为 enter(或 shift+enter),则取消该事件。
当焦点位于 contentEditable 字段中时,这将完全禁用 enter/shift+enter。
如果使用 jQuery,类似:
$("#idContentEditable").keypress(function(e){ return e.which != 13; });
...这将返回 false 并取消输入时的按键事件。
使用 Vanilla JS 可以做到这一点,只需付出同样的努力:
document.getElementById('idContentEditable').addEventListener('keypress', (evt) => {
if (evt.which === 13) {
evt.preventDefault();
}
});
您不应该将 jQuery 用于最简单的事情。此外,您可能想使用“key”而不是“which”:https ://developer.mozilla.org/en-US/docs/Web/Events/keypress
更新,因为keypress
已弃用:
document.getElementById('idContentEditable').addEventListener('keydown', (evt) => {
if (evt.keyCode === 13) {
evt.preventDefault();
}
});
添加以下 CSS 规则以隐藏换行符。这只是一个样式设置,您应该添加一些事件处理程序以防止插入换行符:
.your_editable br {
display: none
}
除了添加换行符之外,浏览器还添加了其他标签和样式(当您粘贴文本时,浏览器还会附加您粘贴的文本样式)。
下面的代码涵盖了所有内容。
- 当你按下回车时,不会添加换行符。
粘贴文本时,浏览器添加的所有元素都会从文本中删除。
$('[contenteditable]').on('paste', function(e) { //strips elements added to the editable tag when pasting var $self = $(this); setTimeout(function() {$self.html($self.text());}, 0); }).on('keypress', function(e) { //ignores enter key return e.which != 13; });
另一种选择是允许输入中断但在模糊时将其删除。这具有处理粘贴内容的优势。您的用户会喜欢它或讨厌它(取决于您的用户)。
function handle_blur(evt){
var elt=evt.target; elt.innerText=elt.innerText.replace(/\n/g,' ');
}
然后,在 html 中:
<span onblur="handle_blur(event)" contenteditable>editable text</span>
如果您使用的是 JQuery 框架,则可以使用on方法对其进行设置,这将使您对所有元素都具有所需的行为,即使最近添加了该元素。
$(document).on('keypress', '.YourClass', function(e){
return e.which != 13;
});
添加:
display: flex;
在 contenteditable html 元素上
$("#idContentEditable").keypress(function(e){ return e.which != 13; });
Kamens 提出的解决方案在 Opera 中不起作用,您应该将事件附加到文档中。
/**
* Pass false to enable
*/
var disableEnterKey = function(){
var disabled = false;
// Keypress event doesn't get fired when assigned to element in Opera
$(document).keypress(function(e){
if (disabled) return e.which != 13;
});
return function(flag){
disabled = (flag !== undefined) ? flag : true;
}
}();
如果要定位所有 contentEditable 字段,请使用
$('[contenteditable]').keypress(function(e){ return e.which != 13; });
我来到这里寻找相同的答案,并惊讶地发现这是一个相当简单的解决方案,使用久经考验的真实Event.preventDefault()
const input = document.getElementById('input');
input.addEventListener('keypress', (e) => {
if (e.which === 13) e.preventDefault();
});
<div contenteditable="true" id="input">
You can edit me, just click on me and start typing.
However, you can't add any line breaks by pressing enter.
</div>
使用 CSS:
word-break: break-all;
对我来说,它的工作!