光標位置插入元素

按下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();//阻止瀏覽器的默認行爲
			                }
			        });



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章