当在Firefox中使用contentEditable时,是否有一种方法可以防止用户通过按Enter或Shift + Enter插入段落或换行符?
你可以为contentEditable字段附加keydown或keypress事件处理程序,并且如果按键代码识别为enter(或shift+enter),则取消事件。
这将在焦点位于contentEditable字段中时完全禁用enter / shift + enter。
如果使用jQuery,可以使用类似以下的代码:
$("#idContentEditable").keypress(function(e){ return e.which != 13; });
...这将返回false并取消回车键的按键事件。
使用纯JavaScript也可以做到这一点,而且工作量相同:
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
}
<DIV>
,因此在此之前可能需要添加.your_editable * { display: inline }
。 - Eugene Ryabtsev除了添加换行符外,浏览器还会添加其他标签和样式(当您粘贴文本时,浏览器还会附加您粘贴的文本样式)。
下面的代码包含所有内容。
When you paste text, all elements added by the browser are stripped from the text.
$('[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,' ');
}
<span onblur="handle_blur(event)" contenteditable>editable text</span>
$(document).on('keypress', '.YourClass', function(e){
return e.which != 13;
});
添加:
display: flex;
div
元素内。当换行时,它会自动添加一个div
元素以开始当前新行。通过使用display: flex
,您可以使DIV水平显示在同一行中,而不像默认情况下应用的display: block
。这并不会阻止添加新行。它只是使它们直接相邻地出现。您可以通过使用DevTools或按shift
+enter
来确认此行为。 - Just Mohit我来到这里搜索同样的问题,惊讶地发现这是一个相当简单的解决方案,使用经过验证的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>
$("#idContentEditable").keypress(function(e){ return e.which != 13; });
/**
* 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]').keypress(function(e){ return e.which != 13; });
contenteditable
元素时非常有用,而不仅仅是一个。 - Systems Rebooter