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

運行效果如下：

Cocos Creator版本：2.2.0

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

創建節點

以下是層級管理器截圖：

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.js

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

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

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

// SpinBox.js

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

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

// SpinBox.js

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

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

// SpinBox.js

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

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

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

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

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

總結

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

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