Question

我刚收到这个视觉设计：

CLG是label代码，而该行是input type=tel 只需忽略紫色覆盖......

设计师要求我在用户输入新号码时删除边框。

这可能吗？

Answer 1

绝对有可能，但它包括

JavaScript（用于检查当前输入大小）
Flexbox（用于自动缩小边框）

这个想法基本上是用:after伪元素模仿边框并将其缩小到<label>的剩余宽度。

＆＃13;

// 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;
  });
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

我使用带有input属性的div元素而不是contenteditable元素。

.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

当然，（几乎）一切皆有可能。

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

标签用作包装元素（相对放置）。因此，跨度可以是绝对的，也可以是相对于标签的位置。跨度有高度，与边框底部相同，为白色。

加载页面或输入值更改时。跨度内的HTML也会发生变化。使其覆盖边界。

请注意，输入和范围内的字体大小必须完全相同。

此外，跨度的起点是相对于标签，而不是输入（因为输入没有结束标记，您不能将其应用于此）。因此，在更改CLG文本或其字体时，您还需要更改范围的起点。

Answer 4

这应该有效

$.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" />

由于

是否可以在新字符下删除输入文本字段的底部边框？

4 个答案: