微信小程序——输入框input

.wxss中代码:
/* pages/bindevent/bindevent.wxss */.myinput{width: 50%;border:1px solid black;}
.wxml中代码:
事件绑定{{name}}
class="a732-18e3-d3eb-acff ": 通过 class 属性设置该输入框的样式类,可以在 WXSS 中通过样式类来定义该输入框的样式 。

微信小程序——输入框input

文章插图
="": 通过属性将输入框的输入事件绑定到名为的事件处理函数上 。当用户在输入框中输入内容时,触发函数 。
注意在绑定事件时候使用,而不是() 。编写时为方便,写的一般是(),但这是缩写了,全部应该写:(),也就是如图所示的方式 。从展开的可以发现,()是人家的,所以自定义的事件的名称为 。实际编写中,可以将“:”省略 。
value="http://www.kingceram.com/post/{{name}}": 通过 value 属性设置输入框的默认值 。在这个例子中,name 是一个变量,它会在数据绑定时动态地决定输入框的默认值 。
.js中代码:
Page({data:{name:"张三"},modify: function(){this.setData({name:"李四"})},changeContent (e){console.log(e.detail.value)this.setData({name:e.detail.value})}})
微信小程序——输入框input

文章插图
提取文本框信息:e. .value
当输入框的内容发生变化时,通过事件对象 e 的 .value 属性可以获取到最新的输入框内容 。可以结合下图,通过按路径查找的方式理解这句代码:通过不断修改输入文本框的内容发现,中包含的value的值在随着文本框内容变化而变化
整体运行效果:
以上为绑定事件的方式获取文本框信息,如果觉得麻烦可以使用model:value=http://www.kingceram.com/post/“{{}}”方式获取 。例如,在.wxml中添加下面的代码,这时候该输入框实现的效果与上面方式实现的相同
【微信小程序——输入框input】