資訊專欄INFORMATION COLUMN
摘要：作者來自原文地址主要通過輸入事件配合的動態改變實現這種效果。實際調試過程中，組件事件觸發后回調的對象，在模擬器中含有屬性，在真機中測過安卓，沒測過卻沒有該屬性，最后選擇對象中的屬性的值的長度來同步輸入的位數。事件最好不要添加改變的代碼。
作者：jeffer
來自：原文地址
主要通過input輸入事件配合css的transform動態改變實現這種效果。
實際調試過程中，input組件bindinput事件觸發后回調的detail對象，在模擬器中含有cursor屬性，在真機中（測過安卓，ios沒測過）卻沒有該屬性，最后選擇detail對象中的value屬性的值的長度來同步輸入的位數。
bindfocus事件最好不要添加改變css的代碼 。
預覽圖片：
JS：
//index.js
//獲取應用實例
var app = getApp()
Page({
data: {
v_username_border:"", //用戶輸入框底部border樣式
v_pwd_border:"", // 密碼輸入框底部border樣式
v_float_username:"", // 浮動文字字transform 樣式
v_float_pwd:"",
num_current_un:0, // 當前輸入的文本位數
sp_num_current_un:"", // 當前輸入文本位數超過限制時的樣式
isPwdError:false // 提交時 密碼輸入錯誤時的文本提示
},
onLoad: function () {
console.log("onLoad")
},
// 用戶名輸入框獲取焦點時事件回調
usernameFocus:function(e){
var that = this;
console.log(e.detail)
},
// 用戶名輸入框輸入時事件回調
usernameInput:function(e){
console.log(e.detail)
this.setData({
v_username_border:"border-bottom:1px solid red",
num_current_un:e.detail.value.length
})
if(e.detail.value.length!=0){
this.setData({
v_float_username:"color:red ;transform: translateY(-18.5px)",
sp_num_current_un:"color:lightseagreen;"
})
if(e.detail.value.length>20){
this.setData({
sp_num_current_un:"color:orangered;"
})
}
}else{
this.setData({
v_float_username:"transform: translateY(0px)",
})
}
},
// // 用戶名輸入框失去焦點時回調
usernameBlur:function(e){
console.log("onBlur")
this.setData({
v_username_border:"border-bottom:1px solid grey"
})
},
pwdFocus:function(e){
console.log("onFocus")
},
pwdInput:function(e){
this.setData({
v_pwd_border:"border-bottom:1px solid red",
isPwdError:false
})
console.log(e.detail)
if(e.detail.value.length!=0){
this.setData({
v_float_pwd:"color:red ; transform: translateY(-18.5px)",
})
}else{
this.setData({
v_float_pwd:"transform: translateY(0px)",
})
}
},
pwdBlur:function(e){
console.log("onBlur")
this.setData({
v_pwd_border:"border-bottom:1px solid grey; "
})
},
// 登錄按鈕模擬表單提交 可用form組件代替
onLogin:function(e){
this.setData({
isPwdError:true
})
}
})
源碼地址https://github.com/jeffer0323...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/66539.html
摘要：作者來自原文地址主要通過輸入事件配合的動態改變實現這種效果。實際調試過程中，組件事件觸發后回調的對象，在模擬器中含有屬性，在真機中測過安卓，沒測過卻沒有該屬性，最后選擇對象中的屬性的值的長度來同步輸入的位數。事件最好不要添加改變的代碼。 作者：jeffer 來自：原文地址 主要通過input輸入事件配合css的transform動態改變實現這種效果。 實際調試過程中，input組件bi...
摘要：組件三要素組件的三要素就是小程序定義的三種文件因為本身就是模塊化開發，所以這天然有利于組件化。日歷組件所以利用和就可以打造一款組件了。這樣就完成了一個組件編寫，任何需要用到的地方都可以引入了。 背景 先談下背景，在做一款產品的時候需要用到日期選擇器，但是官方的卻不太滿足需求，因為無法選擇農歷啊。所以自己來造一個輪子好了，造輪子之前先想想啊，萬一以后多個地方要用到，多個項目要用，怎么辦呢...
摘要：因為循環中當前項的下標變量名默認為，當前項的變量名默認為。包含文章視頻源代碼原創新書移動前端高效開發實戰已在亞馬遜京東當當開售。最新活動報名地址與天天練口語小程序總榜排名第四教育類排名第一的研發團隊，面對面溝通交流。 § 視圖與數據關聯 本文配套視頻地址：https://v.qq.com/x/page/z0554... 開始前請把 ch3-3 分支中的 code/ 目錄導入微信開發工...
摘要：因為循環中當前項的下標變量名默認為，當前項的變量名默認為。包含文章視頻源代碼原創新書移動前端高效開發實戰已在亞馬遜京東當當開售。最新活動報名地址與天天練口語小程序總榜排名第四教育類排名第一的研發團隊，面對面溝通交流。 § 視圖與數據關聯 本文配套視頻地址：https://v.qq.com/x/page/z0554... 開始前請把 ch3-3 分支中的 code/ 目錄導入微信開發工...
閱讀 777·2023-04-26 03:04
閱讀 2860·2021-11-15 18:10
閱讀 1189·2021-09-03 10:28
閱讀 1126·2019-08-30 15:53
閱讀 877·2019-08-30 12:45
閱讀 1951·2019-08-30 11:03
閱讀 2862·2019-08-29 14:01
閱讀 2926·2019-08-28 18:24
