关于JQuery取textarea内容的问题
2018-01-04 22:46
381 查看
原生
使用jq直接取id 然后:- 调用html()/text() 只能拿到初始值 更改后的值拿不到
- 调用val() 就能拿到实时的值
使用NicEdit富文本编辑器
使用 jqury 2.2.2 +nicEdit<form id="contents" action="../teacher/topic/add" method="post"> <input type="text" name="name" placeholder="课题名称" class="title"/> <textarea style="width: 100%; height: 400px;" name="attention"></textarea> <button class="submit" type="button">保存</button> </form>
使用了nicEdit作为轻量的富文本编辑器
然后想ajax提交
然后悲剧就来了….
取id各种方法取不到值
val() html() text()
然后在浏览器查看元素定位了下,textarea被display了并且插入了一个新的div.
虽然不知道这是什么骚操作,但是看到了那个div的
class是
nicEdit-main
然后就
$(".nicEdit-main").html()拿到了值
但是….还是有问题 拿到的值是 html代码 进行拼接发送后 后台SpringMVC拿不到完整的值(空格影响的) 继续解决…
最终还是被我搞定了:
$("#contents").serialize()+encodeURIComponent($(".nicEdit-main").html().toString())
只要编码成URI就可以了后台也能正常取值
参考博客: js中进行字符串转码
后续
搜了一波富文本编辑器 发现大多都是通过禁用textarea然后插入div来做的然后发现了这个 wangEditor 富文本编辑器, 好用多了
然后结合LayUI又出来一个问题:
layui.css文件默认将所有li标签样式清除, 这个富文本编辑器又要用到ol 和 ul 所以问题又来了.
最后是自己写CSS 将
div下的所有li标签自己手动设置默认样式
.main ul li{ list-style-type: square; } .main ol li{ list-style: decimal; }
弄到肝疼..一个主攻后台的,死在了前端.希望不要再出乱七八糟的bug了
相关文章推荐
- 关于jquery操作iframe中内容, 无法正常显示的问题
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- 关于input/textarea提交内容空格回车转换问题,以及ng-model去除空格问题
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- 关于TEXTAREA控件在显示内容时,只显示第一行的问题。
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的差别:关于内容泄露问题
- jquery获取textarea内容为空的问题
- 关于TEXTAREA控件在显示内容时,只显示第一行的问题。
- jquery获取textarea内容为空的问题
- 关于文章的内容太少了与零碎的问题
- 关于JQuery中,click与document click冲突问题
- 关于从js用Jquery向Action传递值出现中文乱码的问题解决
- 关于shell中time的内容重定向问题
- textarea 内容换行问题
- 关于TextArea里获取光标相对位置的问题
- 关于 HTML5、Jquery、Phonegap 跨域问题的研究
- 关于jquery解析json数据时动态追加tr 指定条数换行问题 实现list的 并列显示效果
- textarea内容有换行时存入数据库丢失问题的解决 (转载)
- 基于jquery的关于动态创建DOM元素的问题