回车键创建新段落
Enter key to create a new paragraph
我有这个小提琴:http://jsfiddle.net/2mw4c/1/
$(document).on("keypress", ".content", function (e) {
if (e.keyCode === 13) {
e.preventDefault();
pasteHtmlAtCaret('</p><p>');
}
});
function pasteHtmlAtCaret(html){
var sel, range;
if(window.getSelection){
// IE9 and non-IE
sel = window.getSelection();
if(sel.getRangeAt && sel.rangeCount){
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while((node = el.firstChild)){
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if(lastNode){
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
}else if(document.selection && document.selection.type != "Control"){
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
我不确定我将如何完成当有人按 Enter 时的任务,它会跳出当前的 <p>
标签并启动一个新的<p>
标签,就像在所见即所得的编辑器中一样。有什么建议吗?
像这样吗?
$('p').on('keypress', function (e) {
if (e.keyCode === 13) {
e.preventDefault();
$(this).after('</p><p>');
}
});
做了一个小提琴:http://jsfiddle.net/filever10/5QXqH/
您可以使用
新内容生成一个新<p>
并将其追加(或预置)到.content
容器中,这是一个小提琴。
视图
<div class="content"><p class="new-content" contenteditable="true">Click</p></div>
.JS
$(document).on("keypress", ".content", function (e) {
if (e.keyCode === 13) {
e.preventDefault();
var content = $("p.new-content").text();
$("<p>" + content + "</p>").insertBefore("p.new-content");
$("p.new-content").text("");
}
});
$(document).on("click", "p", function (e) {
$("p.new-content").removeClass("new-content").attr("contenteditable",false);
$(this).addClass("new-content").attr("contenteditable",true).focus();
});
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- AngularJs指令,该指令创建内部有数据对象的新指令
- 创建新属性后的 JSON 空属性
- 两个指令创建新的继承的和隔离的作用域-元素得到哪个
- Jquery:为新数据创建寻呼机(next-prev按钮)
- 新动态创建的(通过javascript)html内容在头中看不到以前使用的javascript文件
- 如何在 JavaScript 字符串中插入新段落
- 回车键创建新段落
- 每次提交表单时都使用新名称创建对象
- 新对象创建问题
- JavaScript 新日期创建错误
- 从HTML标题和段落创建下拉菜单
- 如何使用stripe.js为新客户创建令牌
- 打开一个新窗口创建一个新会话
- 如何从Alfresco UI页面中获取密码,该页面已由admin为新用户创建
- 为新元素创建侦听器
- chrome MutationObserver的新段落文本
- 在JScript中:我可以枚举通过新ActiveXObject()创建的对象上的方法
- jQuery/JS插件,为新用户创建网站介绍/展示
- 烬数据没有为新实例创建id