内联textarea填充剩余宽度

时间：2015-07-14 14:32:36

标签： jquery html css textarea inline

我试图在用户点击它时使元素可编辑，但是我在正确放置新textarea方面遇到了一些困难。

到目前为止我的工作是：

＆＃13;
＆＃13; 
$.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');
	}
});
＆＃13; 
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: '\2714';
		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; }
	}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

我尝试做的是从textarea的样式中删除width: 100%并用jQuery填充剩余的宽度，但我希望textarea用纯CSS填充所有剩余的宽度。

在我的jsFiddle中，如果您点击＆＃39;在＆＃39;处调用此代理，您会注意到textarea位于下方一行，但我希望textarea填充所有剩余的宽度，内嵌图标。

2 个答案:

答案 0 :(得分：2)

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

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

也给这个属性：

width: 90%;

小提琴：http://jsfiddle.net/off89dmh/3/

答案 1 :(得分：1)

对CSS进行以下更改：

  • 添加li {display: flex;}

这将指示li的孩子使用flexbox模型，这样可以让他们填充剩余的空间。这应确保textarea显示在图标旁边，并将剩余空间占用到父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: '\2714';
  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

相关问题
最新问题