AngularJSは入力ボックスの単語制限リマインダー機能を実装します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

AngularJSは入力ボックスの単語制限リマインダー機能を実装します

小云云

Jan 02, 2018 pm 03:43 PM

angularjs javascript 限界

この記事では、AngularJS で実装された入力ボックスの単語制限リマインダー機能を中心に、AngularJS のイベント監視や要素属性の動的操作に関する実装テクニックを紹介します。お困りの方の参考になれば幸いです。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>www.jb51.net AngularJS字数提示</title>
</head>
<style>
  *{
    margin:0;
    padding:0;
  }
  input,button,textarea,select{
    outline:none;
  }
  textarea{
    resize:none;
  }
  .content{
    width:350px;
    height:150px;
    font-size:18px;
    text-indent:40px;
    overflow-y: hidden;
    overflow-x: hidden;
  }
  .content:hover{
    border:1px solid #00ffff;
    cursor:pointer;
  }
  .top{
    vertical-align:top;
  }
  .fontColor
  {
    color:#eee;
  }
  .tableT td{
    margin-right:20px;
  }
</style>
<body ng-app="myApp" ng-controller="myControl">
<table class="tableT">
  <tr>
    <td class="top">退货说明&nbsp:</td>
    <td><textarea id="sayId" class="content" ng-model="say" ng-keyup="changeText()"></textarea></td>
  </tr>
  <tr>
    <td></td>
    <td class="fontColor">你还可以输入{{textLength}}字</td>
  </tr>
</table>
</body>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
  var app = angular.module(&#39;myApp&#39;,[]);
  app.controller(&#39;myControl&#39;,function($scope){
    $scope.textLength = 10;
    $scope.changeText = function(){
      var length = $("#sayId").val().length;  //使用$scope.say.length的时候，输入空格的时候没有计算空格长度。
      console.log(length);
      $scope.textLength = 10 - length;
      if($scope.textLength<=0){
        $scope.textLength = 0;
        $("#sayId").val($scope.say.slice(0,10));
      }
    }
  });
</script>
</html>

ログイン後にコピー

操作の効果:

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1677

CakePHP チュートリアル

1431

Laravel チュートリアル

1334

PHP チュートリアル

1280

C# チュートリアル

1257

Related knowledge

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

動画アカウントのコメント制限を解除するにはどうすればよいですか?動画アカウントのコメントの文字数制限はどのくらいですか? Mar 22, 2024 pm 02:11 PM

ソーシャルメディアでのビデオアカウントの人気により、ますます多くの人がビデオアカウントを使用して日常生活、洞察、ストーリーを共有し始めています。ただし、一部のユーザーはコメントが制限されているため、混乱や不満を感じる可能性があります。 1. 動画アカウントのコメント制限を解除するにはどうすればよいですか?動画アカウントのコメント制限を解除するには、アカウントが正しく登録され、実名認証が完了していることを確認する必要があります。動画アカウントにはコメント要件があり、実名認証を完了したアカウントのみコメント制限を解除できます。アカウントに何らかの異常がある場合は、コメント制限を解除する前に問題を解決する必要があります。 2. 動画アカウントのコミュニティ基準に準拠します。動画アカウントではコメント内容に一定の基準があり、違法な内容が含まれるコメントの場合は発言が制限されます。コメント制限を解除するには、動画アカウントのコミュニティに従う必要があります

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

C++ 関数のオーバーロードに関する制限と考慮事項は何ですか? Apr 13, 2024 pm 01:09 PM

関数のオーバーロードに関する制限には、パラメーターの型と順序が異なっていなければならない (パラメーターの数が同じ場合)、およびデフォルトのパラメーターをオーバーロードの区別に使用できないことが含まれます。また、テンプレート関数と非テンプレート関数をオーバーロードすることはできません。また、テンプレート仕様が異なるテンプレート関数をオーバーロードすることもできます。関数のオーバーロードを過度に使用すると、可読性とデバッグに影響を与える可能性があることに注意してください。コンパイラは、最も具体的な関数から最も具体性の低い関数まで検索して競合を解決します。

See all articles

AngularJSは入力ボックスの単語制限リマインダー機能を実装します

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック