按下alt+enter鍵盤在光標位置插入"<br>"元素實現換行效果.
測試環境:chrome,firefox和ie11(ie11-版本沒有測試)
1:contenteditable="true"的元素
div.bind("keydown",{},function(e){
var e = e || window.event;
ds._ieAltEnter=false
if (e.altKey&& e.keyCode == 13){
var dsClickTextarea = jQuery(this);
var obj= dsClickTextarea[0];
var range, node;
obj.focus();
if (window.getSelection && window.getSelection().getRangeAt) {
var sel = document.getSelection();var rng = sel.getRangeAt(0);
var br = document.createElement('br');
var nrng = document.createRange();
w = document.createTextNode('\u200B'); //借鑑kindeditor編輯器,插入“零寬度非連接空格”,獲取內部html代碼時需要用正則去掉這個內容
rng.insertNode(w);//插入“零寬度非連接空格”,注意這2個內容的插入循序,不能反,具體原因看Range對象的insertNode方法說明
rng.insertNode(br);//插入br
nrng.selectNode(w);//新range選中“零寬度非連接空格”內容
sel.removeAllRanges();//移除原來的選擇
sel.addRange(nrng);//選擇添加新rang
sel.collapse(w, 1);//閉合光標到“零寬度非連接空格”之後
}
e.preventDefault();//阻止瀏覽器的默認行爲 ie的alt+enter 是彈出信息框或全屏
}
});
用contenteditable這個屬性實現可編輯需要加上以下代碼 ,讓可編輯元素的光標在最後
var sel = window.getSelection();
var range = document.createRange();
range.selectNodeContents(input[0]);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);
2:textare元素
textareaObj.bind("keydown",{},function(e){
var e = e || window.event;
if (e.altKey && e.keyCode == 13){
var val = jQuery(this).val();
var end = val.length;
var myValue="\n"//textare 中實現換行 =======>提交後臺一般要轉換成<br>元素提交htmlval=htmlval.replace(/\n/gi,"<br>");
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var value = val.substr(0, startPos) +myValue + val.substr(endPos, end);
// value = value.replace(/<br>/gi,"\n");
jQuery(this).val( value);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
e.preventDefault();//阻止瀏覽器的默認行爲
}
});