微信小程序输入框input【web前端开发吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：43,712贴子：
微信小程序输入框input收藏
属性名 类型 默认值 说明 value String
输入框的内容 type String text input的类型，有效值：text,number,idcard,digit,time,date password Boolean false 是否是密码类型 placeholder String
输入框为空时占位符 placeholder-style String
指定placeholder的样式 placeholder-class String input-placeholder 指定placeholder的样式类 disabled Boolean false 是否禁用 maxlength Number 140 最大输入长度，设置为0的时候不限制最大长度 auto-focus Boolean false 自动聚焦，拉起键盘。页面中只能有一个input设置auto-focus属性 focus Boolean false 使得input获取焦点 bindchange EventHandle
输入框失去焦点时，触发bindchange事件，event.detail={value:value} bindinput EventHandle
除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail={value:value}，处理函数可以直接return一个字符串，将替换输入框的内容。 bindfocus EventHandle
输入框聚焦时触发，event.detail =
{value:value} bindblur EventHandle
输入框失去焦点时触发，event.detail =
{value:value}
&!--input.wxml--&&view class=&section&&
&inputplaceholder=&这是一个可以自动聚焦的input&auto-focus/&&/view&&view class=&section&&
&inputplaceholder=&这个只有在按钮点击的时候才聚焦& focus=&{{focus}}& /&
&viewclass=&btn-area&&
&buttonbindtap=&bindButtonTap&&使得输入框获取焦点&/button&
&/view&&/view&&view class=&section&&
maxlength=&10& placeholder=&最大输入长度10& /&&/view&&view class=&section&&
&viewclass=&section__title&&你输入的是：{{inputValue}}&/view&
bindinput=&bindKeyInput& placeholder=&输入同步到view中&/&&/view&&view class=&section&&
bindinput=&bindReplaceInput& placeholder=&连续的两个1会变成2& /&&/view&&view class=&section&&
bindinput=&bindHideKeyboard& placeholder=&输入123自动收起键盘& /&&/view&&view class=&section&&
&inputtype=&emoji& placeholder=&这是一个带有表情的输入框& /&&/view&&view class=&section&&
&inputpassword type=&number& /&&/view&&view class=&section&&
&inputpassword type=&text& /&&/view&&view class=&section&&
&inputtype=&digit& placeholder=&带小数点的数字键盘&/&&/view&&view class=&section&&
&inputtype=&idcard& placeholder=&身份证输入键盘& /&&/view&&view class=&section&&
&inputplaceholder-style=&color:red& placeholder=&占位符字体是红色的& /&&/view&//input.jsPage({
focus:false,
inputValue:&&
bindButtonTap:function(){
this.setData({
focus:Date.now()
bindKeyInput:function(e){
this.setData({
inputValue:e.detail.value
bindReplaceInput:function(e){
varvalue = e.detail.
var pos= e.detail.
if(pos!= -1){
//光标在中间
varleft = e.detail.value.slice(0,pos);
//计算光标的位置
pos =left.replace(/11/g,'2').
//直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
value:value.replace(/11/g,'2'),
cursor:pos
//或者直接返回字符串,光标在最后边
//return value.replace(/11/g,'2'),
bindHideKeyboard:function(e){
if(e.detail.value=== &123&){
//收起键盘
wx.hideKeyboard();
【html&css】免费学习资料，搜【WEB前端互动交流群】
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或IT视界网刚刚上线！希望各位博友多多吐槽~~~
在 Web应用开发过程中时常会碰到需要动态监听输入框值变化的情况，比如需要用js动态验证简单的规则，大家首先想到的可能是 onkeydown、onkeypress、onkeyup、onchange 这几个事件来监听输入变化，但是这些事件不能监听右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦。因此今天这篇文章向大家介绍一种完美的解决方案：结合 oninput 和 onpropertychange 事件来监听输入框值变化。
首先我们来看几个事件的说明和互相的区别：
1. onchange事件：在内容改变（两次内容有可能相等）且失去焦点时触发；
2. onpropertychange事件：是实时触发，每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件是IE专有。
3. oninput事件：是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。是IE之外的大多数浏览器支持的事件，在value改变时实时触发，但是通过js改变value时不会触发。（IE9以上版本支持oninput）
4. oninput事件和onpropertychange事件的区别
onpropertychange事件是任何属性改变都会触发，而oninput却只在value改变时触发，oninput要通过addEventListener()来注册，onpropertychange注册方法与一般事件相同。
5. oninput与onpropertychange失效的情况：
oninput事件：
（1）当脚本中改变value时，不会触发；
（2）从浏览器的自动下拉提示中选取时，不会触发；
onpropertychange事件：
（1）当input设置为disable=true后，不会触发。
修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
修改了 select 元素的选中项，selectedIndex 属性发生变化。
在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。
完美监听输入框内容变化的示例代码如下：
用户名js实时验证实例代码
JavaScript
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&title&及时验证&/title&
font-weight:
&script type="text/javascript"&
// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
function OnInput (event) {
//alert ("The new content: " + event.target.value);
var value = event.target.
checkusername(value);
// Internet Explorer
function OnPropChanged (event) {
if (event.propertyName.toLowerCase () == "value") {
var value = event.srcElement.
checkusername(value);
//验证用户名方法(只能是数字字母和中文，不能包括特殊字符)
function checkusername(value){
var regex = /^[0-9a-zA-Z\u4e00-\u9fa5]*$/;
if(regex.test(value) == true){
//格式正确
document.getElementById("error").innerHTML="";
//格式错误
document.getElementById("error").innerHTML="用户名格式错误，用户名由数字、字母、中文组成，不能包含特殊字符";
请输入用户名：
&input name="username" type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" placeholder="数字、字母、汉字" /&&label id="error"&&/label&
12345678910111213141516171819202122232425262728293031323334353637383940414243
&html& &head&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&title&及时验证&/title&
color:red;
font-weight:bold;
&script type="text/javascript"& &&// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
function OnInput (event) {
//alert ("The new content: " + event.target.value);
var value = event.target.value;
checkusername(value);
} &&// Internet Explorer
function OnPropChanged (event) {
console.info(event)
if (event.propertyName.toLowerCase () == "value") {
var value = event.srcElement.value;
checkusername(value);
//验证用户名方法(只能是数字字母和中文，不能包括特殊字符)
function checkusername(value){
var regex = /^[0-9a-zA-Z\u4e00-\u9fa5]*$/;
if(regex.test(value) == true){
//格式正确
document.getElementById("error").innerHTML="";
//格式错误
document.getElementById("error").innerHTML="用户名格式错误，用户名由数字、字母、中文组成，不能包含特殊字符";
&/script& &/head& &body&
请输入用户名：
&input name="username" type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" placeholder="数字、字母、汉字" /&&label id="error"&&/label& &/body&&/html&
使用 jQuery 库的话，只需要同时绑定 on input 和 onpropertychange 两个事件就可以了， 示例代码如下：
jQuery实例代码
JavaScript
$('input[name="username"]').bind('input propertychange', function() {
checkusername($(this).val());
$('input[name="username"]').bind('input propertychange', function() {&&&&checkusername($(this).val());});
转载请注明： &