textarea 回车转 <br/>

本文介绍了如何在提交表单时,使用JS将Textarea中的换行符替换为<br>元素,以实现更好的网页布局和用户体验。
提交时使用JS把 textarea 中的 \n 替换成<br> ,偷了下懒JS使用了jquery ^^
<textarea name="tb" rows="2" cols="20" id="tb"></textarea>
<script>
$("#form").submit(function(){
var descrip = $("#tb").val();
descrip=descrip.replace(/\n/g,'<br />');
$("#tb").val(descrip);
}
</script>
<form id="inputForm" action="update.jhtml" method="post" type="ajax" validate-type="validate" style="width: 100%"> <input type="hidden" name="id" value="${followUpRecord.id}" /> <div class="tabContent"> <table class="input input-edit"> <tr> <th> <span class="requiredField">*</span>${message("跟进类型")}: </th> <td colspan="2"> <select class="text followType" name="followType" id="followType" required btn-fun="clear"> <option value="">--请选择--</option> <option value="1" [#if followUpRecord.followType == 1] selected [/#if]>商机跟进</option> <option value="2" [#if followUpRecord.followType == 2] selected [/#if]>客户跟进</option> </select> </td> <th> <span class="requiredField">*</span>${message("跟进对象")}: </th> <td colspan="2"> <span class="search" style="position:relative"> <input type="hidden" id="objId" name="objId" class="text objId" value="${followUpRecord.objId}" btn-fun="clear" required/> <input type="text" id="objName" name="objName" class="text objName" value="${followUpRecord.objName}" onkeyup="clearSelect(this)" required/> <input type="button" class="iconSearch" value="" id="selectObj"> </span> </td> <th class="t_projectStageValue" style="display: none;"> ${message("商机阶段")}: </th> <td class="t_projectStageValue" style="display: none;"> <input type="text" name="projectStageValue" class="text projectStageValue" maxlength="200" value="${followUpRecord.projectStageValue}"/> </td> <th> <span class="requiredField">*</span>${message("状态")}: </th> <td colspan="2"> <select class="text recordStatus" name="recordStatus" required btn-fun="clear" style="pointer-events: none;background-color: #f7f7f7"> <option value="1" [#if followUpRecord.recordStatus == 1] selected [/#if]>未提交</option> <option value="2" [#if followUpRecord.recordStatus == 2] selected [/#if]>已提交</option> <option value="3" [#if followUpRecord.recordStatus == 3] selected [/#if]>审批中</option> </select> </td> </tr> <tr> <th> ${message("标段划分")}: </th> <td> <input type="text" name="sectionDivision" class="text sectionDivision" maxlength="200" /> </td> <th> ${message("跟进阶段")}: </th> <td> <select class="text followUpState" name="followUpState" id="followUpState" required btn-fun="clear"> <option value="">--请选择--</option> [#list followUpStates as followUpState] <option value="${followUpState.value}" [#if followUpRecord.followUpState == followUpState.value] selected [/#if] >${followUpState.remark}</option> [/#list] [#-- <option value="1" [#if followUpRecord.followUpState == 1] selected [/#if]>发现阶段</option>--] [#-- <option value="2" [#if followUpRecord.followUpState == 2] selected [/#if]>客户接触阶段</option>--] [#-- <option value="3" [#if followUpRecord.followUpState == 3] selected [/#if]>需求了解阶段</option>--] [#-- <option value="4" [#if followUpRecord.followUpState == 4] selected [/#if]>评估阶段</option>--] </select> </td> <th> ${message("是否关闭商机")}: </th> <td> <select class="text isCloseNiche" name="isCloseNiche" id="isCloseNiche" required btn-fun="clear"> <option value="">--请选择--</option> <option value="1" [#if followUpRecord.isCloseNiche == 1] selected [/#if]>否</option> <option value="2" [#if followUpRecord.isCloseNiche == 2] selected [/#if]>是</option> </select> </td> </tr> <tr> <th> ${message("项目进度详细描述")}: </th> <td colspan=" 10" style="width: 95%"> <textarea name="projectScheduleDescription" class="text projectScheduleDescription" cols="30" rows="2"/>${followUpRecord.projectScheduleDescription}</textarea> </td> </tr> <tr> <th> ${message("项目运作思路及关键点")}: </th> <td colspan="10" style="width: 95%"> <textarea name="ideaPoint" class="text ideaPoint" cols="30" rows="2"/>${followUpRecord.ideaPoint}</textarea> </td> </tr> <tr> <th> ${message("下一步工作计划")}: </th> <td colspan="10" style="width: 95%"> <textarea name="nextPlan" class="text nextPlan" cols="15" rows="2"/>${followUpRecord.nextPlan} </textarea> </td> </tr> <tr> <th> ${message("需公司其他部门支撑事项")}: </th> <td colspan="10" style="width: 95%"> <textarea name="needBackup" class="text needBackup" cols="15" rows="2"/>${followUpRecord.needBackup}</textarea> </td> </tr> <tr> <th> <span class="requiredField">*</span>${message("总结")}: </th> <td colspan="10" style="width: 95%"> <textarea cols="20" rows="2" name="sumUp" class="text sumUp" required/>${followUpRecord.sumUp} </textarea> </td> </tr> <tr style="display: none" class="t_closeResult"> <th> <span class="requiredField" >*</span>${message("商机关闭原因")}: </th> <td colspan=" 10" style="width: 95%"> <textarea name="closeResult" class="text closeResult" cols="30" rows="2" [#if followUpRecord.isCloseNiche == 2] required [/#if]/>${followUpRecord.closeResult}</textarea> </td> </tr> <tr> <th>${message("图片")}</th> <td colspan="10" style="width: 95%"> <div class="box-wrap"> <div class="box-main" style="overflow:visible;"> <div class="upload-list tc" style="overflow:initial;width:260px;"> [#list followUpRecord.images as image] <div class="ul-box" style="padding:13px 0px 0px"> <div class="pic" style="margin-left:65px; width:80px"><a href="${image.source}" target="_blank"><img src="${image.thumbnail}"></a></div> <b> </b> <a class="del delProductImage1" href="#"></a> <input type="hidden" name="images[${image_index}].title" value="${image.title}"> <input type="hidden" name="images[${image_index}].source" value="${image.source}"> <input type="hidden" name="images[${image_index}].large" value="${image.large}"> <input type="hidden" name="images[${image_index}].medium" value="${image.medium}"> <input type="hidden" name="images[${image_index}].thumbnail" value="${image.thumbnail}"> </div> [/#list] <a href="javascript:;" class="a-upload" id="addProductImage"></a> </div> </div> </div> </td> </tr> </table> <div> <table> <tr> <th>111</th> <td> <textarea rows="2" cols="30"></textarea> </td> </tr> </table> </div> <div class="task-content"> [#include "/crm/follow_up_record/edit/task-form.ftl" /] </div> <br/> <div class="title-style"> 附件上传: <div class="btns"> <a href="javascript:;" id="addAttach" class="button">添附件</a> </div> </div> <table id="table-attach"></table> <div class="title-style"> 抄送人: <div class="btns"> <a href="javascript:;" id="addMember" class="button">添抄送人</a> </div> </div> <table id="table-addMember"></table> <div class="title-style"> 定位:提示:你可以放大地图以便更准确标记。 </div> <div> <table class="input tabContent"> <tr> <td colspan="4" style="line-height: 25px;padding: 5px;border-bottom: 1px solid #dde9f5;"> <!-- <span class="fieldSet"> <input type="hidden" id="areaId" name="areaId" /> </span>   详细地址:<input type="text" name="address" class="txt" maxlength="200"/> --> <br/> 定位地址:<input type="text" id="searchText" style="line-height: 20px;width: 400px;border: solid 1px #dcdcdc;"/> <input type="button" value="搜索" id="searchButton" style="border: revert;"/>    详细地址:<input type="text" id="address" name="address" readonly="readonly" value="${followUpRecord.address}" style="line-height: 20px;width: 400px;border: solid 1px #dcdcdc;"/> 经度:<input type="text" name="longitude" id="mapy" readonly="readonly" value="${followUpRecord.longitude}" style="line-height: 20px;border: solid 1px #dcdcdc;"/>   纬度:<input type="text" name="latitude" id="mapx" readonly="readonly" value="${followUpRecord.latitude}" style="line-height: 20px;border: solid 1px #dcdcdc;"/> </td> </tr> <tr> <td style="height:400px;display:block;" colspan="3"> <div id="allmap"></div> </td> <td style="height:400px;"> <ul id="searchResUl"> </ul> </td> <tr> </table> </div> </div> <div class="fixed-top"> [#if followUpRecord.recordStatus == 1] [#if followUpRecord.isCloseNiche != 2] <a href="javascript:void(0);" class="button sureButton" onclick="submitData(this)">${message("提交")}</a> [/#if] <a href="javascript:void(0);" class="button sureButton" onclick="save(this)">${message("保存")}</a> [#if followUpRecord.isCloseNiche == 2 && followUpRecord.wfState == 0] <a href="javascript:void(0);" class="button sureButton" onclick="check_wf(this)">${message("12501")}</a> [/#if] [/#if] <input type="button" onclick="location.reload(true);" class="button resetButton ml15" value="${message("重置")}"> </div> </form>修改该代码 使得文本框能使用回车换行并出现滚动条
07-31
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>账户批量生成</title> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.staticfile.org/bootstrap-select/1.13.10/css/bootstrap-select.min.css" rel="stylesheet"> <link href="images/main.css" rel="stylesheet"> <script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.staticfile.org/bootbox.js/4.4.0/bootbox.min.js"></script> <script type="text/javascript" src="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdn.staticfile.org/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script> <script type="text/javascript" src="https://cdn.staticfile.org/bootstrap-select/1.13.10/js/i18n/defaults-zh_CN.js"></script> </head> <body> <div class="intro" style="margin-top:0px;">   <div class="col-md-4 col-centered tac"> <img src="images/logo.png" alt="logo"> </div> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-8 col-centered"> <form method="post" id="register-form" autocomplete="off" action="cdks.php" class="nice-validator n-default" novalidate>   <div class="form-group"> <input type="text" class="form-control" id="sqm" name="sqm" placeholder="GM授权码" autocomplete="off"> </div> <div class="form-group"> <input type="text" class="form-control" id="num" name="num" placeholder="生成数量" autocomplete="off"> </div> <div class="form-group"> <select id="type" class="form-control" name="type"><option value="0">请选择类型</option><option value="2">账户批量生成</option></select> </div> <div class="form-center-button"> <input class="btn btn-danger" type="submit" value="生成授权码"> </div><br> <div id="divMsg" style="color:#F00" class="validator-tips"></div> </form> </div> </div> </div> </div> <script> document.onkeydown = function(event) { var target, code, tag; if (!event) { event = window.event; //针对ie浏览器 target = event.srcElement; code = event.keyCode; if (code == 13) { tag = target.tagName; if (tag == "TEXTAREA") { return true; } else { return false; } } }else { target = event.target; //针对遵循w3c标准的浏览器,如Firefox code = event.keyCode; if (code == 13) { tag = target.tagName; if (tag == "INPUT") { return false; } else { return true; } } } }; </script> </body> </html> 重写显示ui
最新发布
11-10
$('textarea').keydown(function(event) { if (event.keyCode == 13) { // 检测是否按下回车键 // 阻止默认的回车换行行为(如果想在文本框中保留回车,则注释掉这一行) event.preventDefault(); // 在当前光标位置插入换行符 var start = this.selectionStart; var end = this.selectionEnd; var value = this.value; this.value = value.substring(0, start) + "\n" + value.substring(end); // 恢复光标位置到下一行开始的位置 this.selectionStart = this.selectionEnd = start + 1; } }); <tr> <th> ${message("项目进度详细描述")}: </th> <td colspan="10" style="width: 95%"> <textarea name="projectScheduleDescription" class="text projectScheduleDescription" cols="30" rows="2"/></textarea> </td> </tr> <tr> <th> ${message("项目运作思路及关键点")}: </th> <td colspan="10" style="width: 95%"> <textarea name="ideaPoint" class="text ideaPoint" cols="30" rows="2"/></textarea> </td> </tr> <tr> <th> ${message("下一步工作计划")}: </th> <td colspan="10" style="width: 95%"> <textarea name="nextPlan" class="text nextPlan" cols="15" rows="2"/></textarea> </td> </tr> <tr> <th > ${message("需公司其他部门支撑事项")}: </th> <td colspan="10" style="width: 95%"> <textarea name="needBackup" class="text needBackup" cols="15" rows="2" /></textarea> </td> </tr> <tr> <th> <span class="requiredField">*</span>${message("总结")}: </th> <td colspan="10" style="width: 95%"> <textarea cols="20" rows="2" name="sumUp" class="text sumUp" required /> </textarea> </td> </tr> <tr style="display: none" class="t_closeResult"> <th> <span class="requiredField">*</span>${message("商机关闭原因")}: </th> <td colspan=" 10" style="width: 95%"> <textarea name="closeResult" class="text closeResult" cols="30" rows="2" [#if followUpRecord.isCloseNiche == 2] required [/#if]/></textarea> </td> </tr> 将换行符保存并显示在textarea
08-23
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值