Có thể xóa đường viền dưới trên trường nhập văn bản, trong char mới không?

Question

Tôi vừa nhận được thiết kế trực quan này:

CLG là một thẻ label, trong khi dòng là một input type=tel Chỉ cần bỏ qua lớp phủ màu tím ...

Các nhà thiết kế yêu cầu tôi để loại bỏ các đường viền khi người dùng nhập một số mới.

Điều đó có khả thi không?

Answer 1

Nó chắc chắn là có thể, tuy nhiên nó bao gồm

• JavaScript (để kiểm tra kích thước đầu vào hiện tại)
• Flexbox (đối với tính năng tự động thu hẹp biên giới)

Ý tưởng cơ bản là để bắt chước đường viền với một phần tử giả :after và thu nhỏ nó thành chiều rộng còn lại của <label>.

// https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/ 
 
[].forEach.call(document.querySelectorAll('input'), function(element) { 
 
    element.addEventListener('input', function() { 
 
    element.size = element.value.length; 
 
    }); 
 
});

label { 
 
    display: flex; 
 
    align-items: stretch; 
 
    font-weight: bold; 
 
} 
 
label:after { 
 
    content: ''; 
 
    display: block; 
 
    width: 100%; 
 
    border-bottom: 1px solid gray; 
 
} 
 
input { 
 
    display: block; 
 
    border: none; 
 
}

<form> 
 
    <label>CLG <input type="tel" size="1"></label> 
 
</form>

Answer 2

Thay vì input yếu tố, tôi đã sử dụng một phần tử div với contenteditable tài sản.

.wrapper { 
    border-bottom: 1px solid black; 
    width: 250px; 
    height: 25px; 
    white-space: nowrap; 
} 
.wrapper > div { 
    display:inline-block; 
    vertical-align: middle; 
    height: 100%; 
} 
.text { 
    position: relative; 
    min-width:10px; 
} 
.text:after { 
    content:""; 
    border-top: 1px solid white; 
    border-bottom: 1px solid white; 
    top: -1px; 
    bottom: -1px; 
    left: 0px; 
    width: 100%; 
    position: absolute; 
} 
.text:focus { 
    outline: none; 
} 

Working Fiddle

Answer 3

Ofcourse, (hầu như) mọi thứ đều có thể.

$(function() { 
 
    $('span').html($('input').val()); /* on page load */ 
 
    $('input').on('keyup', function() { /* on keyup */ 
 
    $(this).next('span').html($(this).val()); 
 
    }); 
 
});

input { 
 
    border: 0; 
 
    border-bottom: 5px solid red; 
 
} 
 
label { 
 
    position: relative; 
 
} 
 
span { 
 
    position: absolute; 
 
    left: 31px; 
 
    top: 19px; 
 
    height: 5px; 
 
    overflow: hidden; 
 
    color: white; 
 
    background: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    CLG 
 
    <input type="text" value="0123" /> 
 
    <span></span> 
 
</label>

Các chức năng nhãn là một yếu tố wrapper (đặt tương đối). Vì vậy, một khoảng có thể được đặt tuyệt đối và vị trí của nó liên quan đến nhãn. Khoảng có chiều cao, giống như phần dưới của viền và màu trắng.

Khi trang được tải hoặc giá trị đầu vào bị thay đổi. HTML bên trong span cũng được thay đổi. Làm cho nó che phủ biên giới.

Lưu ý rằng kích thước phông chữ bên trong đầu vào và khoảng thời gian cần phải giống hệt nhau.

Ngoài ra, điểm bắt đầu của khoảng là tương đối so với nhãn, không phải với đầu vào (vì đầu vào không có thẻ kết thúc, bạn không thể áp dụng nó vào đó). Vì vậy, khi thay đổi văn bản CLG hoặc phông chữ của nó, bạn cũng sẽ cần phải thay đổi điểm bắt đầu của khoảng đó.

Answer 4

này nên làm việc

$.fn.setCursorPosition = function(pos) { 
 
    this.each(function(index, elem) { 
 
    if (elem.setSelectionRange) { 
 
     elem.setSelectionRange(pos, pos); 
 
    } else if (elem.createTextRange) { 
 
     var range = elem.createTextRange(); 
 
     range.collapse(true); 
 
     range.moveEnd('character', pos); 
 
     range.moveStart('character', pos); 
 
     range.select(); 
 
    } 
 
    }); 
 
    return this; 
 
}; 
 

 
$("document").ready(function() { 
 
    var maxlen = $("#txtVal").attr("maxlength"); 
 
    var underscore = ''; 
 
    for (var i = 0; i < maxlen - 1; i++) { 
 
    underscore = underscore + '_'; 
 
    } 
 
    $("#txtVal").val(underscore); 
 

 
    $("#txtVal").click(function() { 
 
    var inputText = $("#txtVal").val(); 
 
    var inputValue = inputText.replace(/_/g, ""); 
 
    $("#txtVal").focus().setCursorPosition(inputValue.length); 
 
    }); 
 

 
    $("#txtVal").keyup(function() { 
 
    var inputText = $("#txtVal").val(); 
 
    var inputValue = inputText.replace(/_/g, ""); 
 
    var underscores = ''; 
 
    for (var i = 0; i < (maxlen - inputValue.length) - 1; i++) { 
 
     underscores = underscores + '_'; 
 
    } 
 

 
    $("#txtVal").val(inputValue + underscores); 
 
    $("#txtVal").focus().setCursorPosition(inputValue.length); 
 

 
    }); 
 

 
    $("#txtVal").blur(function() { 
 
    var len = $("#txtVal").val().length; 
 
    $("#txtVal").attr("maxlength", parseInt(len) + 1); 
 
    }); 
 

 
});

#txtVal { 
 
    border: none; 
 
    outline: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
CGL : 
 
<input type="tel" id="txtVal" maxlength="30" />

Cảm ơn