输入标签和长名称

我已经制作了这些表格，可以在填充标签后保持标签可见。我使用绝对定位，它给出了填充左侧是固定距离的问题，而不依赖于标签名的长度。你可以看到这里的问题：https://jsfiddle.net/eo4uop7g/输入标签和长名称

我试图找出一些其他的解决方案，但没有任何运气。也许你们中的一些人有一个想法如何使这更灵活？

$(document).ready(function() { 
 

 
    $('input').each(function() { 
 

 
    $(this).on('focus', function() { 
 
     $(this).parent('.userbasic article').addClass('active'); 
 
    }); 
 

 
    $(this).on('blur', function() { 
 
     if ($(this).val().length == 0) { 
 
     $(this).parent('.userbasic article').removeClass('active'); 
 
     } 
 
    }); 
 

 
    if ($(this).val() != '') $(this).parent('.userbasic article').addClass('active'); 
 

 
    }); 
 

 
});

form input { 
 
    height: 45px; 
 
    width: 100%; 
 
    transition: .1s all linear; 
 
} 
 

 
.userbasic { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 
.userbasic article { 
 
    flex: 1; 
 
    margin: 0 .5rem 1rem; 
 
    position: relative; 
 
} 
 
.userbasic article:first-child { 
 
    margin-left: 0; 
 
} 
 
.userbasic article:last-child { 
 
    margin-right: 0; 
 
} 
 
.userbasic article.active input { 
 
    padding-left: 80px; 
 
} 
 
.userbasic article.active label { 
 
    top: 0; 
 
    left: 0; 
 
    height: 50px; 
 
    padding: 18px; 
 
    color: white; 
 
    background: #777; 
 
    box-sizing: border-box; 
 
} 
 
.userbasic label { 
 
    position: absolute; 
 
    color: #777; 
 
    top: 18px; 
 
    left: 15px; 
 
    font-size: 12px; 
 
    transition: .1s all linear; 
 
    cursor: text; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form class="userbasic"> 
 
    <article> 
 
    <label for="i4">Zip</label> 
 
    <input id="i4" type="text"> 
 
    </article> 
 
    <article> 
 
    <label for="i5">Very long name</label> 
 
    <input id="i5" type="Number"> 
 
    </article> 
 
</form>

来源

2016-12-09 Morten Hjort

相反为标签使用绝对定位使用静态/相对位置，并使用柔性到位置标签旁边输入字段。这样，当文字较长

$(document).ready(function() { 
 

 
    $('input').each(function() { 
 

 
    $(this).on('focus', function() { 
 
     $(this).parent('.userbasic article').addClass('active'); 
 
    }); 
 

 
    $(this).on('blur', function() { 
 
     if ($(this).val().length == 0) { 
 
     $(this).parent('.userbasic article').removeClass('active'); 
 
     } 
 
    }); 
 

 
    if ($(this).val() != '') $(this).parent('.userbasic article').addClass('active'); 
 

 
    }); 
 

 
});

* { 
 
    box-sizing: border-box; 
 
} 
 
form input { 
 
    height: 45px; 
 
    flex: 1; 
 
    transition: 100ms all linear; 
 
    border: 1px solid #555; 
 
    border-left: none; 
 
} 
 
.userbasic { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 
.userbasic article { 
 
    flex: 1; 
 
    margin: 0 .5rem 1rem; 
 
    position: relative; 
 
    display: flex; 
 
} 
 
.userbasic article:first-child { 
 
    margin-left: 0; 
 
} 
 
.userbasic article:last-child { 
 
    margin-right: 0; 
 
} 
 
.userbasic article.active label { 
 
    color: white; 
 
    background: #777; 
 
} 
 
.userbasic label { 
 
    color: #777; 
 
    font-size: 12px; 
 
    transition: 100ms all linear; 
 
    cursor: text; 
 
    height: 45px; 
 
    line-height: 45px; 
 
    padding: 0 10px; 
 
    display: inline-block; 
 
    border: 1px solid #555; 
 
    border-right: none; 
 
    white-space: nowrap; 
 
    flex: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form class="userbasic"> 
 
    <article> 
 
    <label for="i4">Zip</label> 
 
    <input id="i4" type="text"> 
 
    </article> 
 
    <article> 
 
    <label for="i5">Very long name</label> 
 
    <input id="i5" type="Number"> 
 
    </article> 
 
</form>

您的标签会缩小输入

来源

2016-12-09 11:02:52 Justinas

输入标签和长名称

回答

相关问题