我们以一个案例来讲解所要分享的内容把。案例是这样的:比如一个订单列表,客户可以添加备注,客户点击编辑备注的按钮的时候,textarea显示,当客户保存备注以后,只显示备注文字。如下所示:
上面的图片中,当点击铅笔的时候,textarea显示,自带原有的默认值,并且铅笔按钮消失,显示保存按钮。我们先来看一下这个布局,这里只说备注的布局:
通过布局你应该能弄懂了,显示的时候就是把内容放在span里,要编辑的时候就把span隐藏掉,把textarea展示出来,我们来看一下,具体代码是如下实现的:
3中代码的前4行的思路很明白,就是控制显示与隐藏的,最重要的是最后一行是要分享的重点,我们来解读一下,如下图所示:
讲到这里你应该也get到了如何给textarea赋值了,没错就是通过val()方法即可。至于为啥在js中也是通过value来获取值,而却没有value这个属性,这里我也不知道W3C的人员是咋么想的。
通过以上的讲述你应该明白了原理了把,如果有疑问的话,请给我留言哦