Как известно, клавиатура на смартфоне активируется при клике на поле ввода текста в <input> или <textarea>.Но что если хочется написать что-нибудь не в текстовом поле, а на каком-нибудь html-элементе?
Ниже пример показывает, как при клике на
<div id="div_click"></div> будет активирована клавиатура и вы сможете набирать текст в другой html-элемент <div id="div_content"></div>.Этот способ работает за счет того, что в коде имеется невидимое прозрачное текстовое поле
<textarea id="fake_textarea"></textarea>, в которое, по сути, и набирается текст, а он уже, в свою очередь, передается в <div id="div_content"></div>.Для
<textarea> нужно использовать именно opacity:0, так как с display:none и visibility:hidden это не работает.
Get Android Keyboard:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Get Android Keyboard</title>
<style>
body{
font-size:50px
}
#fake_textarea{
position:fixed;
top:0;
left:0;
width:1px;
height:1px;
opacity:0;
}
#div_click{
color: blue;
cursor: pointer;
}
#div_content{
color: red;
}
</style>
</head>
<body>
<div id="div_click">Click me!</div>
<div id="div_content"></div>
<textarea id="fake_textarea"></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// mobile check
function is_mobile() {
const toMatch = [
/Android/i,
/webOS/i,
/iPhone/i,
/iPad/i,
/iPod/i,
/BlackBerry/i,
/Windows Phone/i
];
return toMatch.some((toMatchItem) => {
return navigator.userAgent.match(toMatchItem);
});
}
// click on div
$('#div_click').on('click', function (e) {
if(is_mobile()){
$('#fake_textarea').val('').focus().select().on('input', function(){
$('#div_content').text(this.value);
});
}
else{
alert('For mobile devices only!');
}
});
</script>
</body>
</html>