代码之家 › 专栏 › 技术社区 › Mark Salvania

检测元素内的文本是否已达到最大宽度

jquery javascript

Mark Salvania · 技术社区 · 7 年前

代码:

<input type="text" class="testinput">
<span class="output-text"></span>

我有我的 :

.output-text {
     max-width:300px;
}

那么我的 jQuery公司

$(".testinput").keyup(function(){
     var text = $(this).val();
     $(".output-text").text(text);
});

input ,它每隔 keyup 但我想知道它何时到达 max-width 的 .output-text 通过发送 alert("success");

3 回复 | 直到 7 年前

Omid Nikrah 7 年前

您可以执行以下操作,使用输入类型文本并将内容传递到一个不可见的div中。

var inputElem = document.getElementById('input'),
  fakeElem = document.getElementById('fakeElem');

inputElem.oninput = function() {
  fakeElem.innerText = inputElem.value;
  if(fakeElem.clientWidth > 300) {
    alert('Hi');
  }
}

#fakeElem {
  width: auto;
  display: inline-block;
  visibility: hidden;
  position: fixed;
  overflow:auto;
}

<input id='input' type='text'>
<div id='fakeElem'></div>

Nathan 7 年前

尝试使用 .css() :

$(".testinput").keyup(function(){
 var text = $(this).val();

 if($('.output-text').width() > parseInt($(".output-text").css('max-width'))) { //your max-width
    alert('success');
 }

 $(".output-text").text(text);
});

请注意 $(".output-text").css('max-width') '300px' '100vw' 或 '100%' . 如果CSS上有基于百分比的值、视区值或计算值,以上代码将不起作用。

Unmitigated 7 年前

您可以使用jQuery的 .width() 检查跨度的宽度。

var output = $(".output-text");
$(".testinput").keyup(function(){
     var text = $(this).val();
     output.text(text);
     if(output.width()>300){
     //more than max-width 300px
     console.log('Output width has exceeded 300px: '+output.width());
     alert('Success!');
     }
});

.output-text {
     max-width:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="testinput">
<span class="output-text"></span>