web-dev-qa-db-ja.com

入力時に入力テキストの幅を取得する

入力タイプのテキストがあります

<input type="text" id="txtid">

入力内にテキストを入力し始めると、入力したテキストの長さを取得できるはずです。

これは私が試したものです：

document.getElementById("txtid").offsetWidth;

そして

var test = document.getElementById("txtid");
var width = (test.clientWidth + 1) + "px";

これら2つは、入力されたテキストの幅を与えません

基本的に私が欲しいのは：

enter image description here

input text幅は320px。入力したテキストの幅、つまり120px、これは私が入るときに変化し続けます。

javascripthtmlcssinput
23
Matarishvan

2つの方法があります。

最初の：

入力の代わりに編集可能なコンテンツでdivを使用できます。このように、divの幅を確認できます。

var elemDiv = document.getElementById('a');

elemDiv.onblur = function() {
  console.log(elemDiv.clientWidth + 'px');
}
div {
  width: auto;
  display: inline-block;
}
<div id='a' contenteditable="true">Test</div>

注：@Leon Adlerが言うように、この方法では、他のプログラムから画像、表、フォーマットを貼り付けることができます。そのため、サイズを取得する前に内容を確認するために、javascriptによる検証が必要になる場合があります。

2番目：

入力タイプのテキストを使用し、コンテンツを非表示のdivに貼り付けます。また、非表示のdivの幅を確認できます。

var elemDiv = document.getElementById('a'),
  elemInput = document.getElementById('b');

elemInput.oninput = function() {
  elemDiv.innerText = elemInput.value;
  console.log(elemDiv.clientWidth + 'px');
}
.div {
  width: auto;
  display: inline-block;
  visibility: hidden;
  position: fixed;
  overflow:auto;
}
<input id='b' type='text'>
<div id='a' class='div'></div>

注：この方法では、inputとdivに同じフォントとフォントサイズが必要です。タグ。

15
R3tep

あなたが文字数ではなく幅を望んでいるように見えるので、私はチラーの答えをわずかに修正しました。画面から絶対に配置されるスパンを作成しました。次に、入力の値を追加してから、スパンの幅を取得しています。もっと派手にするには、javascriptでspanを作成できます。

これを正確に行うには、入力とスパンのCSSスタイルを同じにする必要があることに注意してください。

document.getElementById("txtid").addEventListener("keyup", function(){
  var mrspan = document.getElementById("mrspan");
  mrspan.innerText = this.value;
  console.log(mrspan.offsetWidth + "px");
});
<input type="text" id="txtid">
<span id="mrspan" style="position:absolute;left:-100%;"></span>
10
WizardCoder

[〜＃〜] update [〜＃〜]

私が提唱したい2つのこと

  • Vanilla JSを使用しようとしている場合、noneを表示してもoffsetWidthは表示されません。そのためにvisibility: hidden;またはopacity:0を使用できます。

  • 非表示のspanにoverflow:autoを追加する必要があります。そうしないと、ブラウザーウィンドウの幅を超えて幅が固定されたままの場合、テキストは次の行にワープされます（ウィンドウの幅）

[〜＃〜] old [〜＃〜]

このアプローチを試すことができます

スパンを追加して非表示にします

<span id="value"></span>

そして、onkeyupを非表示のスパンにtextfieldのテキストを追加し、その幅を取得します。

JQUERYのヘルプ付き

[〜＃〜] snippet [〜＃〜]（[〜＃〜] updated [〜＃〜]）

function update(Elm,value) {
     $('#value').text(value);
     var width =   $('#value').width();
     $('#result').text('The width of '+ value +' is '+width +'px');
   
}
#value{
  display:none;
  overflow:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" oninput='update(this,this.value)'>
<span id="value"></span>
<div id="result"></div>

JSのみを使用

[〜＃〜] snippet [〜＃〜]（[〜＃〜] updated [〜＃〜]）

function update(Elm,value) {
     var span = document.getElementById('value');
     span.innerHTML = value;    
     var width = span.offsetWidth;
     document.getElementById('result').innerHTML = 'The width of '+ value +' is '+ width+ 'px';
   
}
#value{
  opacity:0;
  overflow:auto;
}
<input type="text" oninput='update(this,this.value)'>
<span id="value"></span>
<div id="result"></div>
5
Nadir Laskar

Canvas measureText()メソッドはそのような場合に役立ちます。テキスト幅を取得する必要があるときはいつでも、次の関数を呼び出します。

function measureMyInputText() {
    var input = document.getElementById("txtid");
    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");
    var txtWidth = ctx.measureText(input.value).width;

    return txtWidth;
}

より正確な結果を得るには、特にフォントプロパティを入力に設定する場合、キャンバスにフォントスタイルを設定できます。次の関数を使用して、入力フォントを取得します。

 function font(element) {
     var prop = ["font-style", "font-variant", "font-weight", "font-size", "font-family"];
     var font = "";
     for (var x in prop)
         font += window.getComputedStyle(element, null).getPropertyValue(prop[x]) + " ";

     return font;
 }

次に、この行をfrist関数に追加します。

ctx.font = font(input);
4
Llro dasmaz