CSS 固定位置导致软键盘出现在 android 中的文本框上方
CSS fixed position causes soft keypad appearing over the textbox in android
我有一个聊天机器人 window 并且必须将其放置在固定的右下角。我在下面放置了 CSS 设置以用于固定定位和视口设置。
CSS 固定右下角的聊天 windows 在底部有一个文本框。
在 Android 设备中,当该文本框处于焦点状态时,软键盘会出现在文本框上方,没有上面移动网页和定位文本框在键盘上方的正常行为。所以用户看不到他们正在输入的内容。
当我将聊天 window 的 CSS 位置更改为绝对位置时,焦点键盘可以像往常一样正常工作。但是当滚动不在焦点时,整个聊天 window 会向上移动,而不是固定在右下角。
我需要修复这两种情况,以获得焦点中软键盘的正常行为以及固定定位。
请参考以下代码片段,如果您能帮忙解决,那就太好了。
@viewport {
min-width: device-width ;
zoom: 1.0 ;
initial-scale:1.0;
maximum-scale:1.0;
user-scalable:1.0;
}
@-ms-viewport {
min-width: device-width ;
zoom: 1.0 ;
initial-scale:1.0;
maximum-scale:1.0;
user-scalable:1.0;
}
#live-chat {
display:none;
bottom: 0;
right: 0;
position: fixed;
width: 99% !important;
max-width:350px;
max-height:100vh;
background: #e9e9e9;
color: #eae2e2;
font: 100%/1.5em "Droid Sans", sans-serif;
margin: 0;
z-index: 10000; box-shadow: 0px 0px 20px 4px #ccc;
}
<div id="live-chat-container">
<div id="live-chat">
<header class="clearfix">
<a href="javascript:void(0);" onclick="hidechat();" class="chat-close">x</a>
<h4> <img src="https://www.xxxx.com/chat/cf-icon.png" width="32px" style="display:inline;vertical-align:middle;"> Chat with Us</h4>
<span class="chat-message-counter">3</span>
</header>
<div class="chat">
<div class="chat-history">
</div> <!-- end chat-history -->
<p class="chat-feedback" style="display:none;">Your partner is typing?</p>
<form action="#" method="post" onsubmit="return chatsend();">
<fieldset class="cbtgroup">
<input type="text" placeholder="Type your message?" id="cbt" autocomplete="off"><input type="submit" value="»" class="cbt" id="cbtbtn">
</fieldset>
</form>
<div style="font-size:xx-small;text-align:center;"><a href="https://www.xxxx.com" target="_blank">Powered by xxx.com</a></div>
</div>
</div> <!-- end live-chat -->
我找到了该问题的解决方案并将其发布在这里,因为它对遇到相同问题的任何人都有帮助。
我确实将聊天 window 包裹在外层 div,还有一个额外的 div,给了它固定的位置和顶部,底部 0.
然后将聊天 window div 的位置更改为 'relative 并且其高度为容器的 93.9%。
以上两个有助于解决滚动问题(保持聊天 window 固定在右下角)并避免软键盘覆盖文本框
在 android 中,此后注意到另一个问题,即使在文本框失去焦点后软键盘也会出现,因此使用了以下来自 here 的 js 函数。
#live-chat-wrapper{
bottom: 0;
right: 0px;
position: fixed;
width: 99% !important;
max-width:351px;
max-height:484px;
margin: 0;
z-index: 100000;
-webkit-transform: translate3d(0,0,0);
}
#sigiriyalive-chat {
display:none;
bottom: 0;
right: 0px;
position: relative;
width: 99% !important;
max-width:350px;
height: 93.9%;
transition: height 1s ease;
background: #e9e9e9;
color: #eae2e2;
font: 100%/1.5em "Droid Sans", sans-serif;
margin: 0;
z-index: 1000001;
box-shadow: 0px 0px 20px 4px #ccc;
}
<div id="live-chat-wrapper">
<div id="live-chat">
<header class="clearfix">
<a href="javascript:void(0);" onclick="hidechat();" class="chat-close">x</a>
<h4> <img src="https://www.wm.xxx.com/chat/xx-icon.png" width="32px" style="display:inline;vertical-align:middle;"> Chat with Us</h4>
<span class="chat-message-counter">3</span>
</header>
<div class="chat">
<div class="chat-history">
</div> <!-- end chat-history -->
<p class="chat-feedback" style="display:none;">Your partner is typing?</p>
<form action="#" method="post" onsubmit="return chatsend();">
<fieldset class="cbtgroup">
<input type="text" placeholder="Type your message?" id="cbt" autocomplete="off"><input type="submit" value="»" class="cbt" id="cbtbtn">
</fieldset>
</form>
<div style="font-size:xx-small;text-align:center;"><a href="https://www.xx.com" target="_blank">Powered by xx.com</a></div>
</div> <!-- end chat -->
</div> <!-- end sigiriyalive-chat -->
</div>
function hidekeyboard() {
//this set timeout needed for case when hideKeyborad
//is called inside of 'onfocus' event handler
setTimeout(function() {
//creating temp field
var field = document.createElement('input');
field.setAttribute('type', 'text');
//hiding temp field from peoples eyes
//-webkit-user-modify is nessesary for Android 4.x
field.setAttribute('style', 'position:absolute; top: 0px; opacity: 0; -webkit-user-modify: read-write-plaintext-only; left:0px;');
document.body.appendChild(field);
//adding onfocus event handler for out temp field
field.onfocus = function(){
//this timeout of 200ms is nessasary for Android 2.3.x
setTimeout(function() {
field.setAttribute('style', 'display:none;');
setTimeout(function() {
document.body.removeChild(field);
document.body.focus();
}, 14);
}, 200);
};
//focusing it
field.focus();
}, 50);
}
我有一个聊天机器人 window 并且必须将其放置在固定的右下角。我在下面放置了 CSS 设置以用于固定定位和视口设置。
CSS 固定右下角的聊天 windows 在底部有一个文本框。
在 Android 设备中,当该文本框处于焦点状态时,软键盘会出现在文本框上方,没有上面移动网页和定位文本框在键盘上方的正常行为。所以用户看不到他们正在输入的内容。
当我将聊天 window 的 CSS 位置更改为绝对位置时,焦点键盘可以像往常一样正常工作。但是当滚动不在焦点时,整个聊天 window 会向上移动,而不是固定在右下角。
我需要修复这两种情况,以获得焦点中软键盘的正常行为以及固定定位。
请参考以下代码片段,如果您能帮忙解决,那就太好了。
@viewport {
min-width: device-width ;
zoom: 1.0 ;
initial-scale:1.0;
maximum-scale:1.0;
user-scalable:1.0;
}
@-ms-viewport {
min-width: device-width ;
zoom: 1.0 ;
initial-scale:1.0;
maximum-scale:1.0;
user-scalable:1.0;
}
#live-chat {
display:none;
bottom: 0;
right: 0;
position: fixed;
width: 99% !important;
max-width:350px;
max-height:100vh;
background: #e9e9e9;
color: #eae2e2;
font: 100%/1.5em "Droid Sans", sans-serif;
margin: 0;
z-index: 10000; box-shadow: 0px 0px 20px 4px #ccc;
}
<div id="live-chat-container">
<div id="live-chat">
<header class="clearfix">
<a href="javascript:void(0);" onclick="hidechat();" class="chat-close">x</a>
<h4> <img src="https://www.xxxx.com/chat/cf-icon.png" width="32px" style="display:inline;vertical-align:middle;"> Chat with Us</h4>
<span class="chat-message-counter">3</span>
</header>
<div class="chat">
<div class="chat-history">
</div> <!-- end chat-history -->
<p class="chat-feedback" style="display:none;">Your partner is typing?</p>
<form action="#" method="post" onsubmit="return chatsend();">
<fieldset class="cbtgroup">
<input type="text" placeholder="Type your message?" id="cbt" autocomplete="off"><input type="submit" value="»" class="cbt" id="cbtbtn">
</fieldset>
</form>
<div style="font-size:xx-small;text-align:center;"><a href="https://www.xxxx.com" target="_blank">Powered by xxx.com</a></div>
</div>
</div> <!-- end live-chat -->
我找到了该问题的解决方案并将其发布在这里,因为它对遇到相同问题的任何人都有帮助。
我确实将聊天 window 包裹在外层 div,还有一个额外的 div,给了它固定的位置和顶部,底部 0.
然后将聊天 window div 的位置更改为 'relative 并且其高度为容器的 93.9%。
以上两个有助于解决滚动问题(保持聊天 window 固定在右下角)并避免软键盘覆盖文本框
在 android 中,此后注意到另一个问题,即使在文本框失去焦点后软键盘也会出现,因此使用了以下来自 here 的 js 函数。
#live-chat-wrapper{
bottom: 0;
right: 0px;
position: fixed;
width: 99% !important;
max-width:351px;
max-height:484px;
margin: 0;
z-index: 100000;
-webkit-transform: translate3d(0,0,0);
}
#sigiriyalive-chat {
display:none;
bottom: 0;
right: 0px;
position: relative;
width: 99% !important;
max-width:350px;
height: 93.9%;
transition: height 1s ease;
background: #e9e9e9;
color: #eae2e2;
font: 100%/1.5em "Droid Sans", sans-serif;
margin: 0;
z-index: 1000001;
box-shadow: 0px 0px 20px 4px #ccc;
}
<div id="live-chat-wrapper">
<div id="live-chat">
<header class="clearfix">
<a href="javascript:void(0);" onclick="hidechat();" class="chat-close">x</a>
<h4> <img src="https://www.wm.xxx.com/chat/xx-icon.png" width="32px" style="display:inline;vertical-align:middle;"> Chat with Us</h4>
<span class="chat-message-counter">3</span>
</header>
<div class="chat">
<div class="chat-history">
</div> <!-- end chat-history -->
<p class="chat-feedback" style="display:none;">Your partner is typing?</p>
<form action="#" method="post" onsubmit="return chatsend();">
<fieldset class="cbtgroup">
<input type="text" placeholder="Type your message?" id="cbt" autocomplete="off"><input type="submit" value="»" class="cbt" id="cbtbtn">
</fieldset>
</form>
<div style="font-size:xx-small;text-align:center;"><a href="https://www.xx.com" target="_blank">Powered by xx.com</a></div>
</div> <!-- end chat -->
</div> <!-- end sigiriyalive-chat -->
</div>
function hidekeyboard() {
//this set timeout needed for case when hideKeyborad
//is called inside of 'onfocus' event handler
setTimeout(function() {
//creating temp field
var field = document.createElement('input');
field.setAttribute('type', 'text');
//hiding temp field from peoples eyes
//-webkit-user-modify is nessesary for Android 4.x
field.setAttribute('style', 'position:absolute; top: 0px; opacity: 0; -webkit-user-modify: read-write-plaintext-only; left:0px;');
document.body.appendChild(field);
//adding onfocus event handler for out temp field
field.onfocus = function(){
//this timeout of 200ms is nessasary for Android 2.3.x
setTimeout(function() {
field.setAttribute('style', 'display:none;');
setTimeout(function() {
document.body.removeChild(field);
document.body.focus();
}, 14);
}, 200);
};
//focusing it
field.focus();
}, 50);
}