しがないプログラマーの備忘録: 10月 2016

2016年10月31日月曜日

フォーカス列に色をつける方法

【目的】
jQuery3で、フォーカス列に色を付けます。

【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function(){
                $("th,td").hover(function() {
                        var colNo = $(this).index() + 1;
                        var selectorColumnCell = getSelectorColumnCell(colNo);
                        var cells = $(this).closest("table").find(selectorColumnCell);
                        cells.addClass("focus-col");
                    }, function() {
                        var colNo = $(this).index() + 1;
                        var selectorColumnCell = getSelectorColumnCell(colNo);
                        var cells = $(this).closest("table").find(selectorColumnCell);
                        cells.removeClass("focus-col");
                });
                
                function getSelectorColumnCell(colNo) {
                    var selectorTh = "th:nth-child(" + colNo + ")";
                    var selectorTd = "td:nth-child(" + colNo + ")";
                    var selectorColumnCell = selectorTh + "," + selectorTd;
                    return selectorColumnCell;
                }
            });
        </script>
        <style>
            .focus-col {
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>番号</th>
                    <th>名前</th>
                    <th>備考</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>１</td>
                    <td>あああああ</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
                <tr>
                    <td>２</td>
                    <td>いいいいい</td>
                    <td>ＢＢＢＢＢ</td>
                </tr>
                <tr>
                    <td>３</td>
                    <td>ううううう</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。

以上です。

フォーカスセルに色をつける方法(add・removeClass)

【目的】
jQuery3で、フォーカスセルに色を付けます。
※addClass/removeClassで行います。

【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function(){
                $("td").hover(function() {
                        $(this).addClass("focus-cell");
                    }, function() {
                        $(this).removeClass("focus-cell");
                });
            });
        </script>
        <style>
            .focus-cell {
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>番号</th>
                    <th>名前</th>
                    <th>備考</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>１</td>
                    <td>あああああ</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
                <tr>
                    <td>２</td>
                    <td>いいいいい</td>
                    <td>ＢＢＢＢＢ</td>
                </tr>
                <tr>
                    <td>３</td>
                    <td>ううううう</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

以上です。

フォーカス行・セルに色をつける方法

【目的】
CSSを使用し、フォーカス行・セルに色を付けます。

【手順】
１．「index.html」というファイルを作成。
２．「index.html」を以下の様に入力。

<!doctype html>
<html>
    <head>
        <style>
            tr:hover {
                background-color: pink;
            }
            th:hover,td:hover {
                background-color: hotpink;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>番号</th>
                    <th>名前</th>
                    <th>備考</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>１</td>
                    <td>あああああ</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
                <tr>
                    <td>２</td>
                    <td>いいいいい</td>
                    <td>ＢＢＢＢＢ</td>
                </tr>
                <tr>
                    <td>３</td>
                    <td>ううううう</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

３．「index.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。

以上です。

フォーカス行に色をつける方法

【目的】
CSSを使用し、フォーカス行に色を付けます。

【手順】
１．「index.html」というファイルを作成。
２．「index.html」を以下の様に入力。

<!doctype html>
<html>
    <head>
        <style>
            tr:hover {
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>番号</th>
                    <th>名前</th>
                    <th>備考</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>１</td>
                    <td>あああああ</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
                <tr>
                    <td>２</td>
                    <td>いいいいい</td>
                    <td>ＢＢＢＢＢ</td>
                </tr>
                <tr>
                    <td>３</td>
                    <td>ううううう</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

３．「index.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。

以上です。

フォーカスセルに色をつける方法

【目的】
CSSを使用し、フォーカスセルに色を付けます。

【手順】
１．「index.html」というファイルを作成。
２．「index.html」を以下の様に入力。

<!doctype html>
<html>
    <head>
        <style>
            th:hover,td:hover {
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>番号</th>
                    <th>名前</th>
                    <th>備考</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>１</td>
                    <td>あああああ</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
                <tr>
                    <td>２</td>
                    <td>いいいいい</td>
                    <td>ＢＢＢＢＢ</td>
                </tr>
                <tr>
                    <td>３</td>
                    <td>ううううう</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

３．「index.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。

以上です。

テーブルを左右にぴったり並べる方法

【目的】
テーブルを左右に2つぴったり並べます。

【手順】
１．「index.html」というファイルを作成。
２．「index.html」を以下の様に入力。

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <table style="border-collapse: collapse;">
            <tbody>
                <tr>
                    <td valign="top" style="padding: 0px;">
                        <table border="1">
                            <thead>
                                <tr>
                                    <th>番号</th>
                                    <th>名前</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>１</td>
                                    <td>あああああ</td>
                                </tr>
                                <tr>
                                    <td>２</td>
                                    <td>いいいいい</td>
                                </tr>
                                <tr>
                                    <td>３</td>
                                    <td>ううううう</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td valign="top" style="padding: 0px;">
                        <table border="1">
                            <thead>
                                <tr>
                                    <th>項目１</th>
                                    <th>項目２</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>項目１－１</td>
                                    <td>項目２－１</td>
                                </tr>
                                <tr>
                                    <td>項目１－２</td>
                                    <td>項目２－２</td>
                                </tr>
                                <tr>
                                    <td>項目１－３</td>
                                    <td>項目２－３</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

３．「index.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。

以上です。

2016年10月28日金曜日

『Missing api_key/current_key object』エラーの対処方法

【目的】
『Missing api_key/current_key object』を対処する。

【現象】
１．Android Studioでアプリのビルド時に以下の様なエラーが出る。

Error:Execution failed for task ':app:processDebugGoogleServices'.
> Missing api_key/current_key object

【対処方法】
『google-services.json』の『api_key』が以下の様になっていたことが原因。

"api_key": [],

Firebaseコンソールから『google-services.json』をダウンロードしなおしてセットする。

以上です。

『Required XML attribute adSize was missing』エラーの対処方法

【目的】
『Required XML attribute adSize was missing』を対処する。

【現象】
１．Android Studioでアプリ起動後のAdViewに以下の様に『Required XML attribute adSize was missing』と表示され広告が表示されない。

２．layout.xmlで『adSize』と『adUnitId』は固定で指定していない。
３．Java側で『setAdSize』と『setAdUnitId』で指定している。

【対処方法】
記載を下記の様に変更する。
『xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"』
↓
『xmlns:ads="http://schemas.android.com/apk/res-auto"』

以上です。

『The ad size and ad unit ID must be set before loadAd is called.』エラーの対処方法

【目的】
『The ad size and ad unit ID must be set before loadAd is called.』を対処する。

【現象】
１．Android Studioでアプリ起動時に『The ad size and ad unit ID must be set before loadAd is called.』のエラーが出て起動しない。
２．layout.xmlで『adSize』と『adUnitId』は固定で指定している。

【対処方法】
記載を下記の様に変更する。
『xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"』
↓
『xmlns:ads="http://schemas.android.com/apk/res-auto"』

以上です。

2016年10月19日水曜日

チェックボックスのチェンジイベント

【目的】
AngularJSで、チェックボックスのチェンジイベントを使います。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app="mainModule">
    <head>
        <script src="angular.min.js"></script>
        <script>
            var mainModule = angular.module('mainModule',[]);
            var sampleController = function($scope) {
                $scope.onChange = function() {
                    $scope.eventResult = '『' + $scope.inputValue + '』と入力されました。';
                };
            };
            mainModule.controller('sampleController', ['$scope', sampleController]);
        </script>
    </head>
    <body ng-controller="sampleController">
        <input type="checkbox" ng-model="inputValue" ng-change="onChange()" />
        {{eventResult}}
    </body>
</html>

４．ダウンロードした『angular.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。

以上です。

テキストボックスのチェンジイベント

【目的】
AngularJSで、テキストボックスのチェンジイベントを使います。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app="mainModule">
    <head>
        <script src="angular.min.js"></script>
        <script>
            var mainModule = angular.module('mainModule',[]);
            var sampleController = function($scope) {
                $scope.onChange = function() {
                    $scope.eventResult = '『' + $scope.inputValue + '』と入力されました。';
                };
            };
            mainModule.controller('sampleController', ['$scope', sampleController]);
        </script>
    </head>
    <body ng-controller="sampleController">
        <input type="text" ng-model="inputValue" ng-change="onChange()" />
        {{eventResult}}
    </body>
</html>

以上です。

キーイベント(Press)

【目的】
AngularJSで、キーイベントのPressを使います。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app="mainModule">
    <head>
        <script src="angular.min.js"></script>
        <script>
            var mainModule = angular.module('mainModule',[]);
            var sampleController = function($scope) {
                $scope.onKeyPress = function() {
                    $scope.eventResult = 'キーが押されました。';
                };
            };
            mainModule.controller('sampleController', ['$scope', sampleController]);
        </script>
    </head>
    <body ng-controller="sampleController">
        <input type="text" ng-keypress="onKeyPress()" />
        {{eventResult}}
    </body>
</html>

以上です。

キーイベント(Up・Down)

【目的】
AngularJSで、キーイベントのUp・Downを使います。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app="mainModule">
    <head>
        <script src="angular.min.js"></script>
        <script>
            var mainModule = angular.module('mainModule',[]);
            var sampleController = function($scope) {
                $scope.onKeyUp = function() {
                    $scope.eventResult = 'キーがアップされました。';
                };
                $scope.onKeyDown = function() {
                    $scope.eventResult = 'キーがダウンされました。';
                };
            };
            mainModule.controller('sampleController', ['$scope', sampleController]);
        </script>
    </head>
    <body ng-controller="sampleController">
        <input type="text" ng-keyup="onKeyUp()" ng-keydown="onKeyDown()" />
        {{eventResult}}
    </body>
</html>

以上です。

マウスイベント(Over)

【目的】
AngularJSで、マウスイベントのOverを使います。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app="mainModule">
    <head>
        <script src="angular.min.js"></script>
        <script>
            var mainModule = angular.module('mainModule',[]);
            var sampleController = function($scope) {
                $scope.onMouseOver = function() {
                    $scope.eventResult = 'マウスが重なりました。';
                };
            };
            mainModule.controller('sampleController', ['$scope', sampleController]);
        </script>
    </head>
    <body ng-controller="sampleController">
        <div style="width:100px; height:100px; background-color:pink;"
             ng-mouseover="onMouseOver()"></div>
        {{eventResult}}
    </body>
</html>

以上です。

マウスイベント(Move)

【目的】
AngularJSで、マウスイベントのMoveを使います。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app="mainModule">
    <head>
        <script src="angular.min.js"></script>
        <script>
            var mainModule = angular.module('mainModule',[]);
            var sampleController = function($scope) {
                $scope.onMouseMove = function() {
                    $scope.eventResult = 'マウスが移動されました。';
                };
            };
            mainModule.controller('sampleController', ['$scope', sampleController]);
        </script>
    </head>
    <body ng-controller="sampleController">
        <div style="width:100px; height:100px; background-color:pink;"
             ng-mousemove="onMouseMove()"></div>
        {{eventResult}}
    </body>
</html>

以上です。

マウスイベント(Enter・Leave)

【目的】
AngularJSで、マウスイベントのEnter・Leaveを使います。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app="mainModule">
    <head>
        <script src="angular.min.js"></script>
        <script>
            var mainModule = angular.module('mainModule',[]);
            var sampleController = function($scope) {
                $scope.onMouseEnter = function() {
                    $scope.eventResult = 'マウスが入りました。';
                };
                $scope.onMouseLeave = function() {
                    $scope.eventResult = 'マウスが出ました。';
                };
            };
            mainModule.controller('sampleController', ['$scope', sampleController]);
        </script>
    </head>
    <body ng-controller="sampleController">
        <div style="width:100px; height:100px; background-color:pink;"
             ng-mouseenter="onMouseEnter()"
             ng-mouseleave="onMouseLeave()"></div>
        {{eventResult}}
    </body>
</html>

以上です。

マウスイベント(Up・Down)

【目的】
AngularJSで、マウスイベントのUP・Downを使います。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app="mainModule">
    <head>
        <script src="angular.min.js"></script>
        <script>
            var mainModule = angular.module('mainModule',[]);
            var sampleController = function($scope) {
                $scope.onMouseUp = function() {
                    $scope.eventResult = 'マウスがアップされました。';
                };
                $scope.onMouseDown = function() {
                    $scope.eventResult = 'マウスがダウンされました。';
                };
            };
            mainModule.controller('sampleController', ['$scope', sampleController]);
        </script>
    </head>
    <body ng-controller="sampleController">
        <div style="width:100px; height:100px; background-color:pink;"
             ng-mouseup="onMouseUp()"
             ng-mousedown="onMouseDown()"></div>
        {{eventResult}}
    </body>
</html>

以上です。

ボタンのダブルクリックイベント

【目的】
AngularJSで、ボタンのダブルクリックイベントを使用します。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app="mainModule">
    <head>
        <script src="angular.min.js"></script>
        <script>
            var mainModule = angular.module('mainModule',[]);
            var sampleController = function($scope) {
                $scope.onButtonDblClick = function() {
                    $scope.clickResult = 'ダブルクリックされました。';
                };
            };
            mainModule.controller('sampleController', ['$scope', sampleController]);
        </script>
    </head>
    <body ng-controller="sampleController">
        <button ng-dblclick="onButtonDblClick()">ボタン</button>
        {{clickResult}}
    </body>
</html>

以上です。

ボタンのクリックイベント(引数付き)

【目的】
AngularJSで、ボタンのクリックイベントを使用します(引数付き)。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app="mainModule">
    <head>
        <script src="angular.min.js"></script>
        <script>
            var mainModule = angular.module('mainModule',[]);
            var sampleController = function($scope) {
                $scope.onButtonClick = function(value) {
                    $scope.clickResult = '『' + value + '』と入力されました。';
                };
            };
            mainModule.controller('sampleController', ['$scope', sampleController]);
        </script>
    </head>
    <body ng-controller="sampleController">
        <input type="text" ng-model="inputValue">
        <button ng-click="onButtonClick(inputValue)">ボタン</button>
        {{clickResult}}
    </body>
</html>

以上です。

ボタンのクリックイベント

【目的】
AngularJSで、ボタンのクリックイベントを使用します。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。<!doctype html>

<html ng-app="mainModule">
    <head>
        <script src="angular.min.js"></script>
        <script>
            var mainModule = angular.module('mainModule',[]);
            var sampleController = function($scope) {
                $scope.onButtonClick = function() {
                    $scope.clickResult = 'クリックされました。';
                };
            };
            mainModule.controller('sampleController', ['$scope', sampleController]);
        </script>
    </head>
    <body ng-controller="sampleController">
        <button ng-click="onButtonClick()">ボタン</button>
        {{clickResult}}
    </body>
</html>

以上です。

2016年10月18日火曜日

フォームのテキストボックスの入力が正常かどうか確認

【目的】
AngularJSで、フォームのテキストボックスの入力が正常かどうか取得します。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app>
    <head>
        <script src="angular.min.js"></script>
    </head>
    <body>
        <form name="sampleForm">
            <input type="text" name="textInput" ng-model="textInputValue" required ng-minlength="2" ng-maxlength="4" ng-pattern="/^[a-zA-Z]+$/" />
            <span ng-if="sampleForm.textInput.$valid">正常です。</span>
            <span ng-if="sampleForm.textInput.$invalid">異常です。</span>
        </form>
    </body>
</html>

以上です。

フォームのテキストボックスの入力パターンのエラー取得

【目的】
AngularJSで、フォームのテキストボックスの入力パターンのエラーを取得します。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app>
    <head>
        <script src="angular.min.js"></script>
    </head>
    <body>
        <form name="sampleForm">
            <input type="text" name="textInput" ng-model="textInputValue" ng-pattern="/^[a-zA-Z]+$/" />
            <span ng-if="sampleForm.textInput.$error.pattern">英文字のみ入力できます。</span>
        </form>
    </body>
</html>

以上です。

フォームのテキストボックスの最小桁・最大桁のエラー取得

【目的】
AngularJSで、フォームのテキストボックスの最小桁・最大桁のエラーを取得します。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app>
    <head>
        <script src="angular.min.js"></script>
    </head>
    <body>
        <form name="sampleForm">
            <input type="text" name="textInput" ng-model="textInputValue" ng-minlength="2" ng-maxlength="4" />
            <span ng-if="sampleForm.textInput.$error.minlength">2文字以上でないといけません。</span>
            <span ng-if="sampleForm.textInput.$error.maxlength">4文字以下でないといけません。</span>
        </form>
    </body>
</html>

以上です。

フォームのテキストボックスの必須入力のエラー取得

【目的】
AngularJSで、フォームのテキストボックスの必須入力のエラーを取得します。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app>
    <head>
        <script src="angular.min.js"></script>
    </head>
    <body>
        <form name="sampleForm">
            <input type="text" name="textInput" ng-model="textInputValue" required>
            <span ng-if="sampleForm.textInput.$error.required">必須入力です。</span>
        </form>
    </body>
</html>

以上です。

2016年10月17日月曜日

テキストボックスの入力パターンの検証

【目的】
AngularJSで、テキストボックスの入力パターンの検証を行います。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <style>
            .ng-valid {
                border: solid blue 5px;
            }
            .ng-invalid {
                border: solid red 5px;
            }
        </style>
    </head>
    <body>
        <input type="text" ng-model="inputValue" required ng-pattern="/^[a-zA-Z]+$/"><br />
        入力された値：{{inputValue}}
    </body>
</html>

以上です。

テキストボックスの最小桁・最大桁の検証

【目的】
AngularJSで、テキストボックスの最小桁・最大桁の検証を行います。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <style>
            .ng-valid {
                border: solid blue 5px;
            }
            .ng-invalid {
                border: solid red 5px;
            }
        </style>
    </head>
    <body>
        <input type="text" ng-model="inputValue" required ng-minlength="2" ng-maxlength="4"><br />
        入力された値：{{inputValue}}
    </body>
</html>

以上です。

テキストボックスの必須入力の検証

【目的】
AngularJSで、テキストボックスの必須入力の検証を行います。

【手順】
１．『AngularJS1.5.8のダウンロード方法』の手順で、AngularJS1.5.8をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。

<!doctype html>
<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <style>
            .ng-valid {
                border: solid blue 5px;
            }
            .ng-invalid {
                border: solid red 5px;
            }
        </style>
    </head>
    <body>
        <input type="text" ng-model="inputValue" required><br />
        入力された値：{{inputValue}}
    </body>
</html>

以上です。

登録: 投稿 (Atom)

ページ

最近の更新

2016年10月31日月曜日

2016年10月28日金曜日

2016年10月19日水曜日

2016年10月18日火曜日

2016年10月17日月曜日

関連記事