在前端開發中，常常需要使用到輸入手機號碼的文本框，為了更好的用戶體驗以及系統的數據收集，我們需要對其進行一定的格式限制和驗證。今天，我們就來學習一下如何實現這樣一個手機號碼文本框。

/*CSS代碼*/
#phone-input {
width: 200px;
height: 30px;
border: 1px solid #ccc;
padding: 5px;
font-size: 14px;
}
/*正則表達式*/
var phoneReg = /^1[34578]\d{9}$/;

從代碼中可以看出，我們通過CSS設置了手機號碼輸入框的樣式，包括寬度高度、邊框、填充、字體大小等。在JS代碼中，我們使用了正則表達式對輸入的手機號碼進行了驗證，確保其符合手機號碼的格式要求。

其中，/^1[34578]\d{9}$/表示，首先以數字1開頭，然后第二位數字必須是3、4、5、7、8中的一個，接下來的9位數字可以是任意數字，總共11位。這個正則表達式可以有效地驗證手機號碼是否符合格式，同時避免了用戶輸入非數字或非有效數字的情況。

我們可以通過JS代碼來監聽用戶輸入，每當用戶輸入一個字符時，就進行一次正則表達式驗證，并根據驗證結果動態地修改輸入框的樣式，提示用戶輸入是否合法。

以上就是一個基礎的手機號碼文本框的實現過程，希望對您有所幫助。