在Firefox中使用contentEditable时,是否可以通过按Enter或shift + enter来阻止用户插入段落或换行符？
您可以将事件处理程序附加到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
添加以下CSS规则以隐藏换行符.这只是一个样式设置,您应该添加一些事件处理程序以防止插入换行符:
.your_editable br {
display: none
}
如果您正在使用JQuery框架,则可以使用on方法设置它,这将使您在所有元素上具有所需的行为,即使最近添加了此元素也是如此.
$(document).on('keypress', '.YourClass', function(e){
return e.which != 13;
});
另一种选择是允许输入中断但在模糊时删除它们.这具有处理粘贴内容的优点.您的用户会喜欢它还是讨厌它(取决于您的用户).
function handle_blur(evt){
var elt=evt.target; elt.innerText=elt.innerText.replace(/\n/g,' ');
}
那么,在html中:
editable text
除了添加换行符之外,浏览器还会添加其他标签和样式(当您粘贴文本时,浏览器还会附加您的粘贴文本样式).
以下代码涵盖了所有内容.
按Enter键时,不会添加换行符.
粘贴文本时,浏览器添加的所有元素都将从文本中删除.
$('[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;
});
点击此处查看实时示例
京公网安备 11010802040832号 | 京ICP备19059560号-6 