如何定义＆＃34;宽度的其余部分＆＃34;？

时间：2016-09-23 13:05:00

标签： javascript jquery html css cross-browser

这是我的代码：

＆＃13;
＆＃13; 
$(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();
  });

});
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

我该怎么做？

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

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

方向也应该是rtl。

5 个答案:

答案 0 :(得分：0)

您可以使用flexbox将display: flex设置为容器（对于RTL布局也是flex-direction: row-reverse），然后在输入元素上设置flex-grow: 1，即可使用 $scope.getTemplateUrl = function() { if ($scope.md) { return $templateCache.get('library/timelineeditor/slidelibrary/slidelibrary.html') } else { return $templateCache.get('library/timelineeditor/slidelibrary/slidelibrary-mobile.html') } } 。

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

答案 1 :(得分：0)

您可以在css中尝试“calc”。制作span-elements inline-block，给它们一个宽度，然后使用“width：calc（100％ - span的宽度 px）; 作为后备，给它一个百分比宽度，如80％，因为例如Android 4不支持calc。

答案 2 :(得分：0)

我试过这样的希望可以帮助你。

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

答案 3 :(得分：0)

看看这是否有帮助

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

答案 4 :(得分：0)

＆＃13;
＆＃13; 
$(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();
  });

});
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题