Question

我正在创建一个离子/ cordova混合应用程序。在我的一个观点中，我有一个相当大的textarea，它在键盘启动时占据整个屏幕。问题是，当我尝试滚动到页面底部时，textarea捕获它并停止页面滚动。是不是可以让textarea滚动到底部然后页面滚动到那之后？

Answer 1

是的，我建议将块元素和＆lt; hr＆gt; textarea之后的标签。我已经创建了几个需要textarea才能进入的期刊类型的应用程序，而且我已经尝试了很多富有的编辑器，比如tinymce甚至涉及到满足的属性，但我总是回到本地文本区域。

这是我的配置，它将文本编辑器变为最佳位置：

CSS

textarea {
    margin: 0;
    border-radius: 0;
    font-size: 19px; /*optional*/
  -moz-user-select: text; /*android too*/
  -webkit-user-select: text;
}

// JS

$scope.showKeyboard = function(thetxtid) {
    //hide every element in the view so the text area is "fullscreen"
    for (var i = 0; i < ...; i++) {
           document.getElementById(...).style.display = 'none';
        }
    }

    $ionicNavBarDelegate.showBar(false); //if you have a nav bar hide it too

    $timeout(function(){
        //resize text area
        document.getElementById(thetxtid).style.height = window.innerHeight+'px'; // this takes the keyboard height into consideration
    },300)

};

$scope.hideKeyboard = function(thetxtid) {
    //show your elements
    for (var i = 0; i < ...; i++) {
        document.getElementById(...).style.display = 'block';
    }
    $ionicNavBarDelegate.showBar(true);

    $timeout(function(){ 
        //resize text area set the height of the text area to the height of its contents
        var _id = thetxtid;
        text = document.getElementById(_id);
        _scrollH = text.scrollHeight;
        text.style.height = _scrollH + "px";            
    },300);


};

HTML

<textarea class="paper" id="txtid" ng-focus="showKeyboard('txtid')" ng-blur="hideKeyboard('txtid')" placeholder="Something to Share?" ng-model="content.path" ng-trim="false"></textarea>

我希望这会有所帮助。祝你好运

textarea停止在Android上滚动

1 个答案: