一、微信小程序textarea層級
在微信小程序中，textarea組件用於輸入多行文本，它是其中一種視圖層組件，屬於基礎組件之一，定義方式為``。textarea可以通過設置屬性，獲取和設置到當前textarea中的文本內容，以及輸入框的大小，位置等信息。
二、微信小程序textarea失焦
textarea組件，在小程序開發中，我們一般會涉及到textarea的聚焦狀態的控制，為了能夠在用戶輸入完成後隱藏輸入鍵盤，我們需要掌握textarea失焦後的行為表現。對於textarea組件而言，在失焦後並不會主動獲取焦點或者觸發任何行為，需要開發者自行處理相關代碼來實現
三、微信小程序textarea的屬性
textarea組件在使用時可以設置多種屬性，這裡主要介紹其中一些比較常用的屬性：
class：自定義組件的樣式類，可以在對應的css中設置樣式
value：textarea 輸入框中的文本內容
placeholder：輸入框中的默認提示內容
cursor：設置輸入框中的光標所在位置
auto-height：輸入框高度會根據輸入內容自動調整，只在 textarea 顯示時生效，手動設置 height 屬性時不生效
focus：設置輸入框是否在對應時間內自動獲取焦點，默認為 false
disabled：是否禁用textarea輸入框，默認為false
placeholder-style：指定 placeholder 的樣式
四、微信小程序textarea永遠聚焦
在輸入框中，如果我們想要永遠獲取焦點，在textarea組件中，可以設置focus為true，這樣在渲染後，輸入框會默認自動獲取焦點。
五、微信小程序textarea光標如何移動
在web端使用上下左右箭頭來實現輸入框中的光標移動，但是在小程序中不支持這種方式，需要使用其他方式來實現。在微信小程序中，可以使用兩種方式來實現輸入框中光標的移動：1、使用組件自帶的API：在input或者textarea組件上設置”cursorSpacing”和”selectionEnd”的值；2、使用小程序提供的輔助性庫WxParse來實現，WxParse可以將html代碼轉化為小程序view可識別的代碼。
六、微信小程序textarea回車鍵發送
在我們開發小程序時，常常需要輸入完信息後使用左下角的回車鍵來觸發相應的事件，如：發送信息操作。在微信小程序中，我們可以通過設置bindconfirm來實現，在用戶點擊完成時觸發相應事件。
七、微信小程序textarea中文
在微信小程序中，textarea組件和input組件在處理中文輸入上有一些區別。在input組件中，中文輸入法在輸入完成後會主動觸發”input”事件，而在textarea組件中，中文輸入法不會主動觸發”input”事件，所以需要手動監聽”confirm”事件或者其他事件來實現相應的邏輯處理。
八、微信小程序textarea的place不對齊
在小程序中，我們經常遇到輸入框中的placeholder提示與輸入框不在同一橫坐標上的情況。這種情況常常通過在textarea標籤中通過css樣式來控制輸入框和提示位置的方式進行解決。
textarea::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
margin-left:10px;
}
textarea::-moz-placeholder {
/* Firefox 19+ */
margin-left:10px;
}
textarea:-ms-input-placeholder {
/* IE 10+ */
margin-left:10px;
}
九、微信小程序textarea cursor
在textarea中，當用戶點擊輸入框後，光標會默認停留在最後一個字符處，在miniProgram中，當設置了cursor屬性後，光標會默認出現在設置的位置處。通過js手動設置cursor的值，也可以實現移動光標的效果。
十、微信小程序textarea placeholder
在input中，placeholder屬性可以在input框為空的時候顯示默認的提示文本，而在textarea中並沒有直接支持placeholder屬性。我們可以通過在textarea父級元素上定義對應的樣式、位置等來實現相應的效果。也可以通過設置placeholder的Value後，在代碼邏輯處理時控制相應效果的實現。
原創文章，作者：PBBYA，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/331248.html
微信掃一掃 
支付寶掃一掃 