如何定义“其余宽度”？

Question

这是我的代码：

$(function() {

  $("#tags input").on({
    focusout: function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
      if (txt) $("<span/>", {
        text: txt.toLowerCase(),
        insertBefore: this
      });
      this.value = "";
    },
    keydown: function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if (/(188|13|32)/.test(ev.which)) {
        $(this).focusout();
      } else if (ev.which === 8 && this.value == '' && $(this).prev("span").hasClass('toRemove')) { //<< check for class
        $(this).prev("span").remove();
      } else if (ev.which === 8 && this.value == '') {
        $(this).prev("span").addClass('toRemove'); //<< add class
      } else {
        $(this).prevAll('.toRemove').removeClass('toRemove'); //<< remove class on keydown
      }
    }
  });
  $('#tags').on('click', 'span', function() {
    $(this).remove();
  });

});

#tags {
  border: 1px solid #ccc;
  padding: 5px;
  font-family: Arial;
  direction:rtl;
}
#tags > span {
  cursor: pointer;
  display: block;
  float: right;
  color: #3e6d8e;
  background: #E1ECF4;
  padding: 5px;
  padding-left: 25px;
  margin: 4px;
}
#tags > span:hover {
  opacity: 0.7;
}
#tags > span:after {
  position: absolute;
  content: "×";
  border: 1px solid;
  padding: 2px 5px;
  margin-right: 3px;
  font-size: 11px;
}
#tags > input {
  direction: rtl;
  margin: 4px;
  padding: 7px;
  width: auto;
  height: 10px;
}
#tags > span.toRemove {
  background-color: red;
}
.autocomplete{
    border:1px solid #aaa;
    border-top: none;
    width: 179px;
    height: 150px;
    margin-left:5px;
    margin-top: -4px;
}
.autocomplete ul{
    margin-top: 0;
    padding-top: 5px;
    padding-left: 0px;
    list-style-type: none;
}
.autocomplete li{
    border-bottom: 1px solid #eee;
    padding:4px 8px;
    font-size:12px;
}
.autocomplete li:hover{
   background-color:#eee;
   cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tags">
  <span>php</span>
  <span>html</span>
  <input type="text" value="" placeholder="Add a tag" />
</div>

现在我想为input 设置border:none，并且我需要使其宽度等于div.tags 的其余宽度。

请注意，附加标签的数量不是恒定的。如您所见，您可以添加新标签。

我该怎么做？

---

Edit1：我不能使用flex ..因为我网站的大多数用户都使用旧浏览器。

---

Edit2：当我添加一些新标签时，我当前的输入会跳转到新的一行。我想永远保持在同一行。我想要tag input in this page之类的东西。

方向也应该是rtl。

Answer 1

您可以使用flexbox 来做到这一点，方法是将display: flex 设置为您的容器（对于RTL 布局也设置flex-direction: row-reverse），然后在您的输入元素上设置flex-grow: 1。

这样输入元素将按照容器中空闲的宽度增长。

Answer 2

您可以尝试在 css 中“计算”。制作跨度元素inline-block，给它们一个宽度，然后使用“width: calc(100% - 跨度宽度px); 作为后备，给它一个百分比宽度，比如 80%，因为例如Android 4 不支持计算。

Answer 3

我试过这样希望对你有帮助。

添加CSS

.taginput{
        float: left;
    }

在输入标签中添加类

<input class="taginput" type="text" value="" placeholder="Add a tag" />

$(document).ready(function () {
    width = 0;
    $("#tags span").each(function () {
        width = width + $(this).width() + 38; //38px is margin + padding of a span
    });
    $(".taginput").css("width", $("#tags").width() - width);
    $("#tags input").on({
        focusout: function () {
            width = $("#tags span").first().width()+38;
            $("#tags span").each(function () {
                width = width + $(this).width() + 38;
            });
            $(".taginput").css("width", $("#tags").width() - width);
            var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
            if (txt)
                $("<span/>", {
                    text: txt.toLowerCase(),
                    insertBefore: this
                });
            this.value = "";
        },
        keydown: function (ev) {
            // if: comma|enter (delimit more keyCodes with | pipe)
            if (/(188|13|32)/.test(ev.which)) {
                $(this).focusout();
            } else if (ev.which === 8 && this.value == '' && $(this).prev("span").hasClass('toRemove')) { //<< check for class
                $(this).prev("span").remove();
            } else if (ev.which === 8 && this.value == '') {
                $(this).prev("span").addClass('toRemove'); //<< add class
            } else {
                $(this).prevAll('.toRemove').removeClass('toRemove'); //<< remove class on keydown
            }
        }
    });
    $('#tags').on('click', 'span', function () {
        $(this).remove();
    });
});

Answer 4

看看有没有帮助

$(function() {

  $("#tags input").on({
    focusout: function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
      if (txt) $("<span/>", {
        text: txt.toLowerCase(),
        insertAfter: $("#tags > span").last()
      });
      this.value = "";
    },
    keydown: function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if (/(188|13|32)/.test(ev.which)) {
        $(this).focusout();
      } else if (ev.which === 8 && this.value == '' && $(this).prev("span").hasClass('toRemove')) { //<< check for class
        $(this).prev("span").remove();
      } else if (ev.which === 8 && this.value == '') {
        $(this).prev("span").addClass('toRemove'); //<< add class
      } else {
        $(this).prevAll('.toRemove').removeClass('toRemove'); //<< remove class on keydown
      }
    }
  });
  $('#tags').on('click', 'span', function() {
    $(this).remove();
  });

});

body, html{
  width: 100%;
}

#tags {
  border: 1px solid #ccc;
  padding: 5px;
  font-family: Arial;
  direction:rtl;
  height: auto;
  display: inline-block;
  width: 94%
}
#tags > span {
  cursor: pointer;
  display: block;
  float: left;
  color: #3e6d8e;
  background: #E1ECF4;
  padding: 5px;
  padding-left: 25px;
  margin: 4px;
}
#tags > span:hover {
  opacity: 0.7;
}
#tags > span:after {
  position: absolute;
  content: "×";
  border: 1px solid;
  padding: 2px 5px;
  margin-right: 3px;
  font-size: 11px;
}
#tags > input {
  direction: rtl;
  margin: 4px;
  padding: 7px;
  width: auto;
  height: 10px;
  float: left;
  border: none;
  width: 70px;
}
#tags > span.toRemove {
  background-color: red;
}
.autocomplete{
    border:1px solid #aaa;
    border-top: none;
    width: 179px;
    height: 150px;
    margin-left:5px;
    margin-top: -4px;
}
.autocomplete ul{
    margin-top: 0;
    padding-top: 5px;
    padding-left: 0px;
    list-style-type: none;
}
.autocomplete li{
    border-bottom: 1px solid #eee;
    padding:4px 8px;
    font-size:12px;
}
.autocomplete li:hover{
   background-color:#eee;
   cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tags">
  <input type="text" value="" placeholder="Add a tag" />
  <span>php</span>
  <span>html</span>
</div>

Answer 5

$(function() {
var windowwidth=$( window ).width();
    $("#tags input").width(100);
var tagwidth =  $(".tag").width();
  var tagwidth1 =  $(".tag1").width();

  alert(tagwidth);
    alert(tagwidth1);

alert(windowwidth);
  var elementwidth=tagwidth + tagwidth1 + 150;
  alert(elementwidth);
  var inputwidth = windowwidth - elementwidth;
alert(inputwidth);
  $('#tags input').width(inputwidth);
  
  $("#tags input").on({
    focusout: function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
      if (txt) $("<span/>", {
        text: txt.toLowerCase(),
        insertBefore: this
      });
      this.value = "";
    },
    keydown: function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if (/(188|13|32)/.test(ev.which)) {
        $(this).focusout();
      } else if (ev.which === 8 && this.value == '' && $(this).prev("span").hasClass('toRemove')) { //<< check for class
        $(this).prev("span").remove();
      } else if (ev.which === 8 && this.value == '') {
        $(this).prev("span").addClass('toRemove'); //<< add class
      } else {
        $(this).prevAll('.toRemove').removeClass('toRemove'); //<< remove class on keydown
      }
    }
  });
  $('#tags').on('click', 'span', function() {
    $(this).remove();
  });

});

#tags {
  border: 1px solid #ccc;
  padding: 5px;
  font-family: Arial;
  direction:rtl;
}
#tags > span {
  cursor: pointer;
  display: block;
  float: right;
  color: #3e6d8e;
  background: #E1ECF4;
  padding: 5px;
  padding-left: 25px;
  margin: 4px;
}
#tags > span:hover {
  opacity: 0.7;
}
#tags > span:after {
  position: absolute;
  content: "×";
  border: 1px solid;
  padding: 2px 5px;
  margin-right: 3px;
  font-size: 11px;
}
#tags > input {
  direction: rtl;
  margin: 4px;
  padding: 7px;
  width: auto;
  height: 10px;
  border:none;
}
#tags > span.toRemove {
  background-color: red;
}
.autocomplete{
    border:1px solid #aaa;
    border-top: none;
    width: 179px;
    height: 150px;
    margin-left:5px;
    margin-top: -4px;
}
.autocomplete ul{
    margin-top: 0;
    padding-top: 5px;
    padding-left: 0px;
    list-style-type: none;
}
.autocomplete li{
    border-bottom: 1px solid #eee;
    padding:4px 8px;
    font-size:12px;
}
.autocomplete li:hover{
   background-color:#eee;
   cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tags">
  <span class="tag">php</span>
  <span class="tag1">html</span>
  <input type="text" value="" placeholder="Add a tag" />
</div>