时间戳

首页 > 解决方案 > 将空格视为字符？

javascript - 将空格视为字符？

问题描述

我正在运行以下代码来根据内容调整输入的宽度。它工作得很好，除非我在末尾添加空格，然后文本向左移出框。我怎样才能像对待任何其他字符一样对待空格，这样它就不会破坏盒子？

$.fn.liquidWidth = function(text, font) {

  if (!$.fn.liquidWidth.fakeEl) $.fn.liquidWidth.fakeEl = $('<span>').hide().appendTo(document.body);

  $.fn.liquidWidth.fakeEl.text(text || this.val() || this.text() || this.attr('placeholder')).css('font', font || this.css('font'));

  var width = $.fn.liquidWidth.fakeEl.width();

  if (this.data('liquid-min-width') != '' && width < this.data('liquid-min-width')) {
    width = this.data('liquid-min-width');
  } else if (this.data('liquid-max-width') != '' && width > this.data('liquid-max-width')) {
    width = this.data('liquid-max-width');
  }
  if (width < 8) {
    width = 8;
  }

  return width;
};
$(document).on('input', '.liquid-width', function() {
  var inputWidth = $(this).liquidWidth();
  $(this).css({
    width: inputWidth
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type something followed by a bunch of spaces...</p>
<input type="text" class="liquid-width" placeholder="text">

标签： javascriptjquery

解决方案

这不会按原样工作，因为当您向标准 HTML 元素添加空间时，它只会呈现一个，无论您在一行中放置多少个，这与例如 an 完全不同input，它会呈现所有元素。

为了你span也像一个大小input，使用white-space: pre

或将其“空格”替换为&nbsp;

堆栈片段

$.fn.liquidWidth = function(text, font) {

	if (!$.fn.liquidWidth.fakeEl) $.fn.liquidWidth.fakeEl = $('<span>').hide().appendTo(document.body);

	$.fn.liquidWidth.fakeEl.text(text || this.val() || this.text() || this.attr('placeholder')).css('font', font || this.css('font'));

	var width = $.fn.liquidWidth.fakeEl.width();

	if( this.data('liquid-min-width') != '' && width < this.data('liquid-min-width') )
	{
		width = this.data('liquid-min-width');
	}
	else if( this.data('liquid-max-width') != '' && width > this.data('liquid-max-width') )
	{
		width = this.data('liquid-max-width');
	}
	if( width < 8 ) { width = 8; }

	return width;
};
$(document).on('input', '.liquid-width', function() {
	var inputWidth = $(this).liquidWidth();
	$(this).css({
		width: inputWidth
	});
});
span {
  white-space: pre
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type something followed by a bunch of spaces...</p>
<input type="text" class="liquid-width" placeholder="text">

推荐阅读