22330


Onsen-UIの検索テキストコントロール(Search
Input)内に文字をクリアするボタンをつけたいです。下記サイトを参考にしましたが、ボタンがコントロール外に表示されてしまいます。アドバイスを頂ければ幸いです。

参考ページ  
<https://stackoverflow.com/questions/21708689/clear-text-input-on-click-with-
angularjs>

実装コード

[code]

                <!DOCTYPE HTML>
                <html ng-app = "myApp">
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
                    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
                    <script src="components/loader.js"></script>
                    <script src="js/winstore-jscompat.js"></script>
                    <link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
                    <link rel="stylesheet" href="components/loader.css">
                    <link rel="stylesheet" href="css/style.css">
                    <script>
                        var app = angular.module("myApp", ['onsen']);
                        app.controller("myCtrl", function ($scope) {
                            $scope.searchAll = "";
                            $scope.clearSearch = function () {
                                $scope.searchAll = "";
                            };
                        });
                    </script>
                </head>
                <body ng-controller="myCtrl">
                    <ons-navigator var="myNavigator" page="main.html">
                    </ons-navigator> 
    
                    <ons-template id = "main.html">
                        <ons-toolbar>
                            <div class="left"><ons-toolbar-button><ons-icon icon="fa-trash-o"></ons-icon></ons-toolbar-button></div>
                            <div class="center">
                                <input id="searcharea" type="search" class="search-input" ng-model="searchAll">
                                <a class="clear" ng-click="searchAll = null">
                                    <ons-icon icon="fa-times-circle-o"></ons-icon>
                                </a>                    
                            </div>
                            <div class="right"><ons-toolbar-button><ons-icon icon="fa-plus"></ons-icon></ons-toolbar-button></div>
                        </ons-toolbar>
    
                        <form>
                            <textarea class="textarea" placeholder="テキストを入力" rows="15" ng-model="text"></textarea>        
                            <button class="button button--large">Button</button>
                        </form>
                    </ons-template>
                <style>
                #searcharea{ 
                    margin-top: 5px
                }
    
                .textarea{
                    width: 100%;    
                }
    
                .button{
                    margin-top: 10px;
                }
                </style>
                </body>
                </html>
    
[/code]


CC BY-SA 3.0
2016-02-20T15:59:03.057
22322
2016-02-21T02:43:31.667
2017-05-23T12:38:56.083
-1
14390
question
monaca html onsen-ui angularjs
Onsen-UI の検索テキストコントロール（Search Input）に文字クリアボタンを実装したい


CSSを使用して×ボタンのアイコンを移動させてください。

HTML

[code]

    <ons-toolbar>
        <div class="left"><ons-toolbar-button><ons-icon icon="fa-trash-o"></ons-icon></ons-toolbar-button></div>
        <div class="center">
            <div class="tb-search">
                <input id="searcharea" type="search" class="search-input" ng-model="searchAll">
                <div class="tb-clear" ng-click="searchAll = null"><ons-icon icon="fa-times-circle-o"></ons-icon></div>
            </div>
        </div>
        <div class="right"><ons-toolbar-button><ons-icon icon="fa-plus"></ons-icon></ons-toolbar-button></div>
    </ons-toolbar>
    
[/code]

CSS

[code]

    .tb-search {
        position: relative;
    }
    .tb-clear {
        position: absolute;
        color: #ccc;
        top: 50%;
        right: 5px;
        height: 21px;
        line-height: 1.3;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    
[/code]


CC BY-SA 3.0
2016-02-21T02:43:31.667
22330
2016-02-21T02:43:31.667
9566
22322
answer