入力タイプのテキストがあります
<input type="text" id="txtid">
入力内にテキストを入力し始めると、入力したテキストの長さを取得できるはずです。
これは私が試したものです:
document.getElementById("txtid").offsetWidth;
そして
var test = document.getElementById("txtid");
var width = (test.clientWidth + 1) + "px";
これら2つは、入力されたテキストの幅を与えません
基本的に私が欲しいのは:
input text
幅は320px
。入力したテキストの幅、つまり120px
、これは私が入るときに変化し続けます。
最初の:
入力の代わりに編集可能なコンテンツで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
に同じフォントとフォントサイズが必要です。タグ。
あなたが文字数ではなく幅を望んでいるように見えるので、私はチラーの答えをわずかに修正しました。画面から絶対に配置されるスパンを作成しました。次に、入力の値を追加してから、スパンの幅を取得しています。もっと派手にするには、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>
[〜#〜] 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>
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);