jQuery实现文本域中按回车加换行

2016-02-22    编辑:tong_21     点击(
我们测试过在文本框中如果我们不进行一些设置在文本框中是无法进行排版的哦,如果我们有回车,但是提交之后就没有了,这样需要进行一些简单的处理哦,下面来看一个基于前端js做法。

例子

 代码如下 复制代码

<script type="text/javascript">
 jQuery(function ()
{
jQuery('.content textarea').keyup(function (e){
if(e.keyCode == 13){
var curr = getCaret(this);
var val = jQuery(this).val();
var end = val.length;

jQuery(this).val( val.substr(0, curr) + '<br/>' + val.substr(curr, end));
}

})
});

function getCaret(el) {
if (el.selectionStart) {
return el.selectionStart;
}
else if (document.selection) {
el.focus();

var r = document.selection.createRange();
if (r == null) {
return 0;
}

var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);

return rc.text.length;

return 0;
}

</script>

html

<div class="content">
<textarea>在光标位置按回车加br标签</textarea>
</div>

补充:现文本框回车键转tab键

 代码如下 复制代码

<script type="text/javascript">
//功能:将回车键转tab键
jQuery(function () {
jQuery('input:text:first').focus();
var $inp = jQuery('input:text');
$inp.bind('keydown', function (e) {
var key = e.which;
if (key == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
jQuery(":input:text:eq(" + nxtIdx + ")").focus();
}
});
});
</script>