我正在做一个 Phonegap 应用程序,在文本输入中执行退格键或删除键时遇到了这个奇怪的问题。文本输入占用 100% 的宽度,如果我的字符串比移动屏幕长并且我在输入中退格/删除,它会破坏我的 html 布局,它会将我的标题带到文本输入上方的输入元素的左上角位置. 这是正在发生的事情的 2 张图片。如果我的字符串很小,退格/德尔不会破坏我的 html。
这是我输入的 css 和 html:
.dentry {color: #000000;font-size: 2.6em}
#dentry-wrap {width:100%; height:80px; margin:0 0 7px 0;}
.inputareafull {
width:100%; height:80px; float:left; font-size:2.6em;
border-top-left-radius:3px; -moz-border-radius-topleft:3px; border-bottom-left-radius:3px; -moz-border-radius-bottomleft:3px;
border-top:1px solid #c4c4c4; border-bottom:1px solid #fff;
background-color: #f7f7f7;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(247, 247, 247)), to(rgb(222, 225, 225)));
background-image: -webkit-linear-gradient(top, rgb(247, 247, 247), rgb(222, 225, 225));
background-image: -moz-linear-gradient(top, rgb(247, 247, 247), rgb(222, 225, 225));
background-image: -o-linear-gradient(top, rgb(247, 247, 247), rgb(222, 225, 225));
background-image: -ms-linear-gradient(top, rgb(247, 247, 247), rgb(222, 225, 225));
background-image: linear-gradient(top, rgb(247, 247, 247), rgb(222, 225, 225));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f7f7f7', EndColorStr='#dee1e1');
}
.inputareafull input {width:98%; height:100%; text-align: left; background:none; border:none;}
<div id="dentry-wrap">
<div class="inputareafull">
<input class="dentry"></input>
</div>
</div>
我没有做 CSS 的东西,我不是 100% 可能导致这种情况的原因。
任何帮助表示感谢!