2014-09-04 116 views
0

我正在创建一个离子/科尔多瓦混合应用程序。在我的一个观点中,我有一个相当大的textarea,它在键盘弹起时占据整个屏幕。问题是当我尝试滚动到页面底部时,textarea捕获它并停止页面滚动。是否有可能让textarea滚动到底部,然后在那之后滚动页面?textarea停止滚动android

回答

2

是的,我会推荐的是在textarea之后放置一个像块和< hr>标签。我创建了几种需要输入textarea的日志类型的应用程序,并且我已经尝试过大量的编辑器,比如tinymce,甚至涉猎了contenteditable属性,但我总是回到本地textarea。

这里是我的配置是获取文本编辑器来一个甜蜜点:

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> 

希望这有助于。 祝你好运

+0

这太棒了,谢谢!这正是我正在寻找的。 – 2014-09-05 19:32:39