javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(textarea): Allow scroll in textarea when focused

Browse Source 
Closes #1280
This commit is contained in:
Adam Bradley
2014-05-09 12:05:44 -05:00
parent b0cfe233a8
commit 5f2fdfdd07
5 changed files with 104 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
js/utils/keyboard.js
View File

@@ -161,7 +161,9 @@ function keyboardOnKeyDown(e) {
}
function keyboardPreventDefault(e) {
e.preventDefault();
if( e.target.tagName !== 'TEXTAREA' ) {
e.preventDefault();
}
}
function keyboardOrientationChange() {

3
js/views/scrollView.js
View File

@@ -696,7 +696,8 @@ ionic.views.Scroll = ionic.views.View.inherit({
};
self.touchMove = function(e) {
if(e.defaultPrevented) {
if(e.defaultPrevented ||
(e.target.tagName === 'TEXTAREA' && e.target.parentElement.querySelector(':focus')) ) {
return;
}

2
scss/_form.scss
View File

@@ -146,12 +146,12 @@ textarea {
.item-stacked-label textarea
{
@include border-radius(2px);
overflow: hidden;
padding: 4px 8px 3px;
border: none;
background-color: $input-bg;
}
.item-stacked-label input {
overflow: hidden;
height: $line-height-computed + $font-size-base + 12px;
}

4
test/css/input-textarea.html
View File

@@ -94,7 +94,7 @@
<label class="item item-input">
<i class="icon ion-email"></i>
<span class="input-label">Email</span>
<input type="email" placeholder="your@email.com">
<textarea placeholder="your@email.com"></textarea>
</label>
</div>
@@ -193,7 +193,7 @@
<div class="list">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search">
<textarea placeholder="Favorites"></textarea>
</label>
</div>

179
test/html/input.html
View File

@@ -68,101 +68,114 @@
<form ng-submit="formSubmit()">
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<textarea>
Line 1
Line 2
Line 3
Line 4
Line 5
</textarea>
</label>
<label class="item item-input">
<span class="input-label">Your Name</span>
<input type="text" value="name input" id="name">
</label>
<div class="item item-checkbox">
<span class="input-label">Remember me</span>
<label class="checkbox">
<input type="checkbox" id="remember-me">
</label>
</div>
<label class="item item-input">
<span class="input-label">From 1</span>
<input type="text" value="from input" id="from1">
</label>
<label class="item item-input">
<span class="input-label">To 1</span>
<input type="text" value="to input" id="to1">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 1</span>
<textarea id="textarea" id="comment1">comment textarea</textarea>
</label>
<label class="item item-input">
<span class="input-label">From 2</span>
<input type="text" value="" id="from2">
</label>
<label class="item item-input">
<span class="input-label">To 2</span>
<input type="text" value="" id="to2">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 2</span>
<textarea id="textarea" id="comment2"></textarea>
</label>
<label class="item item-input">
<span class="input-label">From 3</span>
<input type="text" value="">
</label>
<label class="item item-input">
<span class="input-label">To 3</span>
<input type="text" value="">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 3</span>
<textarea id="textarea"></textarea>
</label>
<label class="item item-input">
<span class="input-label">From 4</span>
<input type="text" value="">
</label>
<label class="item item-input">
<span class="input-label">To 4</span>
<input type="text" value="">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 4</span>
<textarea id="textarea"></textarea>
</label>
<label class="item item-input">
<span class="input-label">From 5</span>
<input type="text" value="">
</label>
<label class="item item-input">
<span class="input-label">To 5</span>
<input type="text" value="">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 5</span>
<textarea id="textarea"></textarea>
</label>
<button type="button" class="button button-block button-energized" ng-click="openModal()">
Open Modal
</button>
<button type="submit" class="button button-block button-calm">
Submit!
</button>
</div>
<label class="item item-input">
<span class="input-label">From 1</span>
<input type="text" value="from input" id="from1">
</label>
<label class="item item-input">
<span class="input-label">To 1</span>
<input type="text" value="to input" id="to1">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 1</span>
<textarea id="textarea" id="comment1">comment textarea</textarea>
</label>
<label class="item item-input">
<span class="input-label">From 2</span>
<input type="text" value="" id="from2">
</label>
<label class="item item-input">
<span class="input-label">To 2</span>
<input type="text" value="" id="to2">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 2</span>
<textarea id="textarea" id="comment2"></textarea>
</label>
<label class="item item-input">
<span class="input-label">From 3</span>
<input type="text" value="">
</label>
<label class="item item-input">
<span class="input-label">To 3</span>
<input type="text" value="">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 3</span>
<textarea id="textarea"></textarea>
</label>
<label class="item item-input">
<span class="input-label">From 4</span>
<input type="text" value="">
</label>
<label class="item item-input">
<span class="input-label">To 4</span>
<input type="text" value="">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 4</span>
<textarea id="textarea"></textarea>
</label>
<label class="item item-input">
<span class="input-label">From 5</span>
<input type="text" value="">
</label>
<label class="item item-input">
<span class="input-label">To 5</span>
<input type="text" value="">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 5</span>
<textarea id="textarea"></textarea>
</label>
<button type="button" class="button button-block button-energized" ng-click="openModal()">
Open Modal
</button>
<button type="submit" class="button button-block button-calm">
Submit!
</button>
</form>
<p>