How can I define “the rest of width”?

问题

Here is my code:

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

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.

How can I do that?

Edit1: 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.

Also the direction should be rtl.

回答1:

You can do that using flexbox by setting display: flex to your container (also flex-direction: row-reverse for the RTL layout), then flex-grow: 1 on your input element.

This way the input element will grow by the width that's free in the container.

回答2:

You could try "calc" in css. Make the span-elements inline-block, give them a width, and then use "width: calc(100% - width of spanspx); As fallback, give it a percentage width, like 80%,since e.g. Android 4 isn't supporting calc.

回答3:

I have tried like this hope that helps you.

add css

.taginput{
        float: left;
    }

add class in input tag

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

回答4:

See if this helps

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

回答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>

来源：https://stackoverflow.com/questions/39661525/how-can-i-define-the-rest-of-width

标签

javascript

jquery

html

css

cross-browser