點擊上方藍色字關注我們~

當玩家購買道具的時候，一個個買可能會比較麻煩，用數字調節框的話玩家一次性就可以買好幾十個了(錢夠的話)。

運行效果如下：

Cocos Creator版本：2.2.0

后臺回復"數字調節框"，獲取該項目完整文件。

創建節點

以下是層級管理器截圖：

bg就是一個Sprite類型節點，作為屏幕背景，不用管。

SpinBox是一個Layout類型節點，用來布局輸入框和按鈕，方向為水平，Resize Mode為CONTAINER。

editbox節點就是編輯器自帶的輸入框(筆者將PLACEHOLDER_LABEL給刪除了)，這里給

buttons也是一個Layout類型節點，用來布局up和down兩個按鈕，方向為垂直，Resize Mode為CONTAINER。

up和down是兩個按鈕(Label節點已被刪除)，分別用來調高和調低數字。

給輸入框和調高調低按鈕加上背景圖片后，場景編輯器顯示如下：

編寫腳本

在資源管理器中創建一個名為SpinBox.js的腳本文件，將其掛到SpinBox節點上。

在properties中添加如下屬性：

// SpinBox.jsproperties: { textLabel: cc.Label, // 輸入框顯示文本 min: cc.Integer, // 最小值 max: cc.Integer, // 最大值},

筆者的想法是開發者能夠自己設置調節框所允許的最大最小值：

不過筆者這里將輸入框最大允許輸入的字符個數設為了2，也就是說最大值也就是99了。當然大家可以按照自身情況進行修改：

輸入框一開始應該顯示最小值：

// SpinBox.jsonLoad() { // 剛開始顯示設置的小值 this.textLabel.node.active = true; this.textLabel.string = String(this.min);},

因為輸入框下的TEXT_LABEL節點默認是不可見的，所以這里要對該節點先進行顯示。

以下是調高和調低按鈕的事件函數：

// SpinBox.jsup() { // 調高數字 let temp = (Number(this.textLabel.string) + 1); if (temp > this.max) { return; } else { this.textLabel.string = String(temp); }},down() { // 調低數字 let temp = (Number(this.textLabel.string) - 1); if (temp < this.min) { return; } else { this.textLabel.string = String(temp); }},

• 如果玩家按下調高按鈕，那么首先判斷該按鈕是否超出最大值，是的話則無效，否則數字加1。

• 如果玩家按下調低按鈕，那么首先判斷該按鈕是否超出最小值，是的話則無效，否則數字減1。

最后是輸入框的兩個事件函數：

// SpinBox.jsinputBegin() { // 輸入開始 this.temp = this.textLabel.string;},inputDone() { // 輸入結束 if (isNaN(this.textLabel.string)) { this.textLabel.string = this.temp; // 如果輸入非數字則數字不變 } else if (Number(this.textLabel.string) > this.max) { // 輸入數字不能超過最大值 this.textLabel.string = String(this.max); } else if (Number(this.textLabel.string) < this.min) { // 輸入數字不能小于最小值 this.textLabel.string = String(this.min); }}

輸入框允許玩家輸入任何文本，所以我們應該對文本進行過濾。

• 當輸入開始時(當玩家點擊輸入框)，我們將當前輸入框的文本保存在this.temp中。

• 輸入結束后(按下回車或者觸摸屏幕其他地方)，我們首先判斷玩家輸入的是不是數字。如果不是，則將文本還原為之前的樣子；如果是數字，那么判斷是否超出了最大值和最小值，超出的話就將文本直接設置為最大最小值。

記得在屬性檢查器中添加這兩個函數：

以上代碼只是筆者對數字調節框功能的一種想法，大家當然可以自行修改，做出自己想要的功能。

今天教程就到這，希望大家有所收獲~

總結

以上是生活随笔為你收集整理的cocoscreator editbox 只允许数字_用Cocos做一个数字调节框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。