輸入標籤和長名稱

Question

我已經制作了這些表格，可以在填充標籤後保持標籤可見。我使用絕對定位，它給出了填充左側是固定距離的問題，而不依賴於標籤名的長度。 你可以看到這裏的問題：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>

Answer 1

相反爲標籤使用絕對定位使用靜態/相對位置，並使用柔性到位置標籤旁邊輸入字段。這樣，當文字較長

$(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>

您的標籤會縮小輸入