Как спозиционировать диалог выбора фото в Web Application на iPad?

Question

Кирилл Сидоров @cyberia

Веб-разработчик, плавно перехожу в мобильные разра

Как спозиционировать диалог выбора фото в Web Application на iPad?

Уважаемые хабражители, заимающиеся разработкой под собильные системы, подскажите что можно сделать с диалогом выбора фотографий. На странице есть input[type=file] с display:none в стилях.

По тапу на элемент я через jQuery вызываю метод click() на этом инпуте. На десктопе все хорошо, открывается диалог выбора файла. На айфоне тоже все хорошо, снизу появляется диалог с выбором сфотографировать или выбрать из библиотеки.

Но на айпаде это реализованно иначе, в виде popUp окна. И из-за того что инпут скрыт попап этот появляется где захочет, зачастую сверху и при выборе пункта «Из библиотеки» диалог просто выходит за область экрана и выбрать фото становиться невозможно. Подскажите кто знает какой нибудь хак или способ борьбы с этим недоразумением.

Боюсь что не понятно написал, вот скрин на всякий случай

Вопрос задан более трёх лет назад
2868 просмотров

Комментировать

Подписаться 3 Оценить Комментировать

Пригласить эксперта

Ответы на вопрос 1

2 комментария

Кирилл Сидоров @cyberia Автор вопроса

Пробовал. Перовое что в голову пришло. Если даже просто показать кнопку, то поповер выползет где захочет. Если отменить его действие, тапнуть на нативный элемент поповер спозиционируется рядом как и должен. И все последующие вызовы через click() будут позиционировать диалог на месте его прошлого появления. Кажется это баг сафари

Написано более трёх лет назад

truekenny @truekenny

Воспроизвёл ситуацию, вызываю click() в атрибуте onclick тэга a – popup появляется в месте где я тронул дисплей. Не могу воспроизвести.

<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>demo</title>
	<script type="text/javascript" src="http://yandex.st/jquery/1.9.1/jquery.min.js"> </script>
	
	<script type="text/javascript">
	function demo(){
		$("input").click();
		return false;
	}
	</script>
	
	<style type="text/css">
	a {
		margin: 200px;
		display: block;
	}
	input {
		display: none;
	}
	</style>
</head>

<body>

	<input type="file" />
	<br />

	<a href="#" onclick="return demo();">123</a>
	<br />

	<a href="#" onclick="$('input').click(); return false">456</a>
</body>
</html>

Написано более трёх лет назад

Ваш ответ на вопрос