如何定义“宽度的其余部分”？ [英] How can I define "the rest of width"?

问题描述

这是我的代码：

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

现在我想设置 border：none 输入而且我还需要使其宽度等于 div.tags 的宽度。

Now I want to set border:none for input and also I need to make its width equal to the rest of div.tags's width.

注意到附加标签的数量不是常数..如您所见，您可以添加新标签。

Noted that the number of attached tags isn't constant.. as you see, you can add new tags.

我该怎么做？

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

I cannot use flex .. because the most of my website's users use old browsers.

Edit2：当我添加一些新标签时，我当前的输入会跳转到新行。我想永远保持同一条线。我希望在此页面中标记输入。

My current input jumps to a new line when I add some new tags. I want to keep it in the same line forever. I want something like tag input in this page.

此外还有方向应该是rtl。

Also the direction should be rtl.

推荐答案

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

这篇关于如何定义“宽度的其余部分”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！