自动调整输入及其邻居输入的问题

Question

您好，请参阅下面的 link。

<div class="parent">
<div class="child-a">
    <input type="text" name="name" value="" class="name" placeholder="Name:" data-autosize-input='{ "space": 40 }' />
</div>
<div class="child-b">
    <input name="email" placeholder="Email:" class="email">
</div>

我并排输入了两个。第一个（名称）根据文本的长度调整大小。第二个（电子邮件）具有最小宽度，因此当名称宽度超过 50% 时，电子邮件将向下移动到下一行。我发现了两个问题。

第一个问题是，当电子邮件输入向下移动时，它不会覆盖整个宽度，而是保持在 50%，这是它的最小宽度。有什么办法可以解决这个问题，让邮件向下移动时覆盖整个宽度。

第二个问题是名称比父边界长，超出了框。有没有办法在父边界内停止？

您可以从下图中看到当您的名称比父名称更宽并且电子邮件未覆盖整个宽度时的样子。

谢谢。

Answer 1

使用CSS @media 查询

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    input.email{
        width:100% !important;
    }
}

当设备宽度在 320-480 px 范围内时将执行此操作，所有一般手机都应覆盖该范围，否则您也可以在拖动和调整浏览器大小时执行此操作。

@media only screen and (min-width : 320px) and (max-width : 480px) {}

这些称为 CSS 媒体查询，您可以在此处阅读它们 W3schools

Answer 2

好的，这是一个 hack，因为我们不想编辑自动调整大小的插件

添加到 CSS

.big {
    width:100% !important;
    clear:both;
}
.big > input{
    width:100% !important;
}

添加到 JS

setInterval(function(){
   if( $('.child-a > input').width()>$('.child-a').parent().width()/2){
    $('.child-a,.child-b').addClass('big');
   }else{
     $('.child-a,.child-b').removeClass('big');
   }
},200);

当您在不同的设备高度和宽度上调整大小或显示您的 web 应用程序时，请忘记它们工作的媒体查询。

自动调整输入及其邻居输入的问题

Issue with autosize input and it's neighbor input

jquery

css

input

autosize