内联文本区域填充剩余宽度

Question

我试图让一个元素在用户点击它时可编辑，但是我在正确放置新文本区域时遇到了一些困难。

这是我目前的工作：

$.fn.replaceWithPush = function(a) {
    var $a = $(a);

    this.replaceWith($a);
    return $a;
};

$(document).ready(function(){
 
 $(".editable").click(function(event){
  event.preventDefault();
  switchToTextArea($(this));
 });
 
 function switchToTextArea(element) {
  var mnxx = element.height();
  var replaced = element.replaceWithPush('<textarea name = "' + element.attr('id') + '" class = "editable" rows = "1" columns = "26">' + $(element).text() + '</textarea>');
  $(replaced).css({"min-height": (mnxx + 20) + "px"}); $(replaced).focus(); $(replaced).parent().addClass('editable');

  $(replaced).focusout(function(){
   
   var data = {id: author };
   data[$(replaced).attr('name')] = $(replaced).val();
   
   $.ajax({
      method: "POST",
      url: templateDir.concat('/updatedetails.php'),
      data: data

    })
     
   switchBack($(this), element.clone().wrap('<div>').parent().html());

   return false;
  });
  
  $(replaced).blur(function(){
   switchBack($(this), element.clone().wrap('<div>').parent().html());
  });
 }
 
 function switchBack(element, previous) {
  var replaced = element.replaceWithPush(previous).text( $(element).val());
  
  $(replaced).click(function(event){
   event.preventDefault();
   switchToTextArea($(this));
  });
  
  $(replaced).parent().removeClass('editable');
 }
});

ul textarea {
  position: relative;
  border-radius: 5px;
  width: 100%; 
  line-height: 1.2em; 
  margin: 0px; 
  text-indent: 0px; 
  border: 1px solid rgba(93, 173, 226, 0);
  -webkit-animation: borderin 0.5s forwards;
  animation: borderin 0.5s forwards;
  display: inline-block;
  
  padding: 0.25em;
 }

ul {
  position: relative; 
    border-top: 1px solid #dcdcdc;
  color: #000;
  font-weight: normal;
  
  list-style: none;
 }

ul a.call {
  color: #6ab4e4;
 }
a {
    color:inherit;
    text-decoration: none;
}

 ul.editable:after {
  position: absolute;
  width: 25px;
  height: 25px;
  right: -12px;
  top: -12px;
  background-color: #5DADE2;
  content: '14';
  border-radius: 50%;
  
  z-index: 1;
  
  color: #fff;
  text-align: center;
  line-height: 25px;
  cursor: pointer;
  
  -webkit-animation: fadeIn 0.5s forwards;
  animation: fadeIn 0.5s forwards;
 }
 
 @-webkit-keyframes fadeIn {
   0% { opacity: 0; }
   100% { opacity: 1; }
 }

 @keyframes fadeIn {
   0% { opacity: 0; }
   100% { opacity: 1; }
 }

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <br/>
    <li><i class="fa fa-phone-square"></i>&nbsp;&nbsp;<a href = "#" class = "call editable" id = "phone">Call this agent at <?php echo get_user_meta(get_the_author_meta( 'ID' ), 'LC_Phone', true); ?></a></li>
    <li><i class="fa fa-envelope-square"></i>&nbsp;&nbsp;<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">michaelnewman@gmail.com</a></li>
    <li><i class="fa fa-facebook-square"></i>&nbsp;&nbsp;<a href = "#">Michael Newman</a></li>
    <li><i class="fa fa-google-plus-square"></i>&nbsp;&nbsp;<a href = "#">Michael Newman</a></li>
    <li><i class="fa fa-twitter-square"></i>&nbsp;&nbsp;<a href = "#">Michael Newman</a></li>
    <br/>
   </ul>

http://jsfiddle.net/off89dmh/1/

我试图做的是从文本区域的样式中删除 width: 100% 并用 jQuery 填充剩余的宽度，但我希望文本区域用纯 [=32] 填充所有剩余的宽度=].

在我的 jsFiddle 中，如果您单击 'call this agent at'，您会注意到文本区域位于下方一行，但我希望文本区域填充所有剩余宽度，与图标内联。

Answer 1

原因是，您同时设置了 width 和 padding。请使用 border-box box-sizing 属性:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

也给这个属性:

width: 90%;

Fiddle: http://jsfiddle.net/off89dmh/3/

Answer 2

对您的 CSS 进行以下更改：

添加li {display: flex;}

这将指示 li 的 children 使用 flexbox 模型，这将允许他们填充剩余的 space。这应该确保 textarea 显示在图标旁边，并占用剩余的 space 直到 parent li.

的右边缘

$.fn.replaceWithPush = function(a) {
  var $a = $(a);

  this.replaceWith($a);
  return $a;
};

$(document).ready(function() {

  $(".editable").click(function(event) {
    event.preventDefault();
    switchToTextArea($(this));
  });

  function switchToTextArea(element) {
    var mnxx = element.height();
    var replaced = element.replaceWithPush('<textarea name = "' + element.attr('id') + '" class = "editable" rows = "1" columns = "26">' + $(element).text() + '</textarea>');
    $(replaced).css({
      "min-height": (mnxx + 20) + "px"
    });
    $(replaced).focus();
    $(replaced).parent().addClass('editable');

    $(replaced).focusout(function() {

      var data = {
        id: author
      };
      data[$(replaced).attr('name')] = $(replaced).val();

      $.ajax({
        method: "POST",
        url: templateDir.concat('/updatedetails.php'),
        data: data

      })

      switchBack($(this), element.clone().wrap('<div>').parent().html());

      return false;
    });

    $(replaced).blur(function() {
      switchBack($(this), element.clone().wrap('<div>').parent().html());
    });
  }

  function switchBack(element, previous) {
    var replaced = element.replaceWithPush(previous).text($(element).val());

    $(replaced).click(function(event) {
      event.preventDefault();
      switchToTextArea($(this));
    });

    $(replaced).parent().removeClass('editable');
  }
});

li {
  display: flex;
}
ul textarea {
  position: relative;
  border-radius: 5px;
  width: 100%;
  line-height: 1.2em;
  margin: 0px;
  text-indent: 0px;
  border: 1px solid rgba(93, 173, 226, 0);
  -webkit-animation: borderin 0.5s forwards;
  animation: borderin 0.5s forwards;
  display: inline-block;
  padding: 0.25em;
}
ul {
  position: relative;
  border-top: 1px solid #dcdcdc;
  color: #000;
  font-weight: normal;
  list-style: none;
}
ul a.call {
  color: #6ab4e4;
}
a {
  color: inherit;
  text-decoration: none;
}
ul.editable:after {
  position: absolute;
  width: 25px;
  height: 25px;
  right: -12px;
  top: -12px;
  background-color: #5DADE2;
  content: '14';
  border-radius: 50%;
  z-index: 1;
  color: #fff;
  text-align: center;
  line-height: 25px;
  cursor: pointer;
  -webkit-animation: fadeIn 0.5s forwards;
  animation: fadeIn 0.5s forwards;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <br/>
  <li><i class="fa fa-phone-square"></i>&nbsp;&nbsp;<a href="#" class="call editable" id="phone">Call this agent at <?php echo get_user_meta(get_the_author_meta( 'ID' ), 'LC_Phone', true); ?></a>
  </li>
  <li><i class="fa fa-envelope-square"></i>&nbsp;&nbsp;<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">michaelnewman@gmail.com</a>
  </li>
  <li><i class="fa fa-facebook-square"></i>&nbsp;&nbsp;<a href="#">Michael Newman</a>
  </li>
  <li><i class="fa fa-google-plus-square"></i>&nbsp;&nbsp;<a href="#">Michael Newman</a>
  </li>
  <li><i class="fa fa-twitter-square"></i>&nbsp;&nbsp;<a href="#">Michael Newman</a>
  </li>
  <br/>
</ul>

Flexbox 支持非常好，但请注意它不适用于旧版本的 IE：http://caniuse.com/#feat=flexbox

内联文本区域填充剩余宽度

Inline textarea filling remaining width

html

css

jquery

textarea

inline