mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
d0047cda44
Overhaul of the tap system so the keyboard does not cover up focused inputs, correctly bring up the keyboard on text input focus, disabling focus during scroll, disabling clicks after a hold then scroll, removing 300ms delay without additional event handlers on each element, etc. Refactored the tap/click/scroll/activator events for more testability, along with adding more tests.
280 lines
8.6 KiB
HTML
280 lines
8.6 KiB
HTML
<html ng-app="navTest">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Inputs</title>
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
|
<link rel="stylesheet" href="../../dist/css/ionic.css">
|
|
<style>
|
|
input,
|
|
textarea {
|
|
background: #ddd !important;
|
|
}
|
|
|
|
input[type=text],
|
|
textarea {
|
|
background: orange !important;
|
|
}
|
|
|
|
input[type=text]:focus,
|
|
textarea:focus {
|
|
background: yellow !important;
|
|
}
|
|
|
|
input[type=text].cloned-text-input,
|
|
textarea.cloned-text-input {
|
|
background: red !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body ng-controller="AppCtrl">
|
|
|
|
<div id="logs" style="position:fixed; top:0; left:0; z-index:9999; background: #eee; font-size:8px; line-height:10px; display:none; "></div>
|
|
|
|
<ion-view id="view">
|
|
<header>
|
|
<label class="item item-input">
|
|
<span class="input-label">Header</span>
|
|
<input type="text" value="header input">
|
|
</label>
|
|
</header>
|
|
|
|
<ion-content class="has-header padding">
|
|
|
|
<div class="list">
|
|
<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>
|
|
</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 class="button button-block button-energized" ng-click="openModal()">
|
|
Open Modal
|
|
</button>
|
|
|
|
<p>
|
|
<a href="clickTests.html">Click Tests</a> -
|
|
<a href="tapInputs.html">Tap Inputs</a> -
|
|
<a href="/test/">CSS Tests</a>
|
|
</p>
|
|
</ion-content>
|
|
</ion-view>
|
|
|
|
<script id="modal.html" type="text/ng-template">
|
|
<div class="modal" ng-controller="ModalCtrl">
|
|
<header class="bar bar-header bar-positive">
|
|
<h1 class="title">New Contact</h1>
|
|
<button class="button button-clear button-primary" ng-click="closeModal()" ion-stop-event="click">Cancel</button>
|
|
</header>
|
|
<ion-content class='has-header'>
|
|
<div class="padding">
|
|
<div class="list">
|
|
<label class="item item-input">
|
|
<span class="input-label">First Name</span>
|
|
<input type="text" placeholder="">
|
|
</label>
|
|
<label class="item item-input">
|
|
<span class="input-label">Last Name</span>
|
|
<input type="text" placeholder="">
|
|
</label>
|
|
<label class="item item-input">
|
|
<span class="input-label">Email</span>
|
|
<input type="text" placeholder="">
|
|
</label>
|
|
<button class="button button-full button-positive" ng-click="closeModal()">Create</button>
|
|
</div>
|
|
</div>
|
|
</ion-content>
|
|
</div>
|
|
</script>
|
|
|
|
<script src="../../../../dist/js/ionic.bundle.js"></script>
|
|
<script>
|
|
|
|
var msgs = [];
|
|
var timerId;
|
|
console.debug2 = function() {
|
|
var msg = [];
|
|
for (var i = 0, j = arguments.length; i < j; i++){
|
|
msg.push(arguments[i]);
|
|
}
|
|
msg.push(getTime());
|
|
|
|
msgs.push(msg.join(', '));
|
|
|
|
clearTimeout(timerId);
|
|
timerId = setTimeout(function(){
|
|
document.getElementById('view').style.display = 'none';
|
|
document.writeln(msgs.join('<br>'));
|
|
console.debug = function(){};
|
|
}, 2000);
|
|
};
|
|
|
|
document.addEventListener('touchstart', function(e){
|
|
console.debug('touchstart');
|
|
});
|
|
document.addEventListener('touchstart', function(e){
|
|
console.debug('touchend');
|
|
});
|
|
document.addEventListener('click', function(event){
|
|
console.debug('click', 'clientX: ' + event.clientX, 'clientY: ' + event.clientY);
|
|
});
|
|
|
|
function getTime() {
|
|
var d = new Date();
|
|
return d.getSeconds() + '.' + d.getMilliseconds();
|
|
}
|
|
|
|
|
|
angular.module('navTest', ['ionic'])
|
|
|
|
.controller('AppCtrl', function($scope, $ionicModal) {
|
|
|
|
$scope.openModal = function() {
|
|
$scope.modal.show();
|
|
};
|
|
$ionicModal.fromTemplateUrl('modal.html', function(modal) {
|
|
$scope.modal = modal;
|
|
}, {
|
|
animation: 'slide-in-up',
|
|
focusFirstInput: true
|
|
});
|
|
|
|
})
|
|
|
|
.controller('ModalCtrl', function($scope) {
|
|
$scope.closeModal = function() {
|
|
$scope.modal.hide();
|
|
}
|
|
});
|
|
|
|
var msgs = [];
|
|
var index = 0;
|
|
var timeId;
|
|
var consoleDebug = console.debug;
|
|
|
|
console.debug = function() {
|
|
index++;
|
|
var msg = [];
|
|
msg.push(index);
|
|
for (var i = 0, j = arguments.length; i < j; i++){
|
|
msg.push(arguments[i]);
|
|
}
|
|
|
|
msg = msg.join(', ');
|
|
|
|
if(arguments[0] === 'ERROR!') msg = '<span style="color:red;font-weight:bold">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'touchstart') msg = '<span style="color:pink">' + msg + '</span>';
|
|
if(arguments[0] === 'touchend') msg = '<span style="color:red">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'mousedown') msg = '<span style="color:lightblue">' + msg + '</span>';
|
|
if(arguments[0] === 'mouseup') msg = '<span style="color:blue">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'focusin') msg = '<span style="color:orange">' + msg + '</span>';
|
|
if(arguments[0] === 'focusout') msg = '<span style="color:orangered">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'click') msg = '<span style="color:green;font-weight:bold">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'clickPrevent') msg = '<span style="color:gray;">' + msg + '</span>';
|
|
|
|
msgs.unshift( msg );
|
|
|
|
if(msgs.length > 30) {
|
|
msgs.splice(40);
|
|
}
|
|
|
|
// do this so we try not to interfere with the device performance
|
|
clearTimeout(timeId);
|
|
timeId = setTimeout(function(){
|
|
document.getElementById('logs').innerHTML = msgs.join('<br>');
|
|
}, 150);
|
|
|
|
consoleDebug.apply(this, arguments);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|