AngularJS 中的文字區域與輸入
本文將通過 AngularJS 中的示例討論 textarea
和 input
指令之間的區別。
在開發包含表單的 Web 應用程式時,新開發人員對 input
和 textarea
之間的區別有疑問。在本教程中,我們將通過示例詳細討論這兩者。
AngularJS 中的 Textarea 指令
有很多情況,例如構建聯絡表單或建立部落格文章和編寫儀表板,其中包含我們希望使用者編寫多行的某些欄位。我們使用 textarea
指令允許使用者寫多行,有時有字元限制,有時沒有字元限制。
AngularJS 改變了 <textarea>
元素的預設行為,但前提是 ng-model
屬性存在。ng-model
提供資料繫結,這表明它們是 AngularJS 模型的一部分,並且可以在 AngularJS 函式和 DOM 中定向和更新。
讓我們看一下下面給出的例子。
# AngularJS
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<label>Enter Message:</label><br>
<textarea ng-model="myTextarea"></textarea>
</body>
</html>
輸出:
AngularJS 中的 Input
指令
Input 是用於獲取使用者輸入的 HTML。與 textarea
一樣,input
也在 Angular 指令中使用 ng-model
進行資料繫結。我們可以使用以下程式碼輕鬆新增輸入。
# AngularJS
<input ng-model="getName">
輸入欄位中最重要的是驗證。input
標籤使用 type
屬性來定義使用者可以輸入的輸入型別。
例如,如果我們希望使用者在特定欄位中只輸入一封電子郵件,我們可以指定 email
的型別,如下所示。
# angular
<input type="email" ng-model="getEmail">
讓我們通過一個示例並使用輸入欄位和文字區域來檢查其區別。
# Angular
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
textarea.ng-invalid {
background-color: yellow;
}
textarea.ng-valid {
background-color: lightblue;
}
</style>
<body ng-app="">
<p>Enter Name</p>
<input type="text" ng-model="getName">
<p>Enter Message:</p>
<textarea ng-model="getMessage" required>
輸出:
AngularJS 中 Textarea 和 Input 指令的區別
textarea
和 input
欄位之間有很多區別,如下所述。
textarea
允許我們從使用者那裡獲取多行作為輸入。但另一方面,我們只能通過使用input
欄位從使用者那裡獲得有限的輸入。textarea
允許我們限制插入文字區域的字元。另一方面,輸入
欄位不允許我們限制字元數。input
欄位允許我們進行驗證,並且只允許使用者在type
屬性的幫助下輸入所需的資料。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn