このはてなの質問にあるプロポーショナルフォントにぴったりのTextareaの回答を見てなるほどと思ったので、なんかやってみる。
挙動は胡散臭いが、作業スペースをvisibility: hidden; にすればそれなりに見える。まあ、ふつうはonKeyUp何かにしかけず、submit時のチェックに利用すると思う。
firefox, operaはwrap=offでないと日本語がうまくいかなかった。
利用価値としては...、帳票系の業務WEBアプリの前処理とかだろうか？
以下はこのまま使ってはいけないコード。
- 改行の扱いが雑すぎる。
- ブラウザの分類も雑。
- scrollHeightとclientHeightはスタイルによっては一致しないらしい。ボーダー？
- 適当に5px増やしてるけど、最小値をどこかで計っておくべき。
- ブラウザによってpxの扱いが違うので最大幅もどこかで計っておくべき。
- そもそもコードが...。
function limitChars(target, maxWidth)
{
var change = false;
if (navigator.appVersion.match(/AppleWebKit|MSIE/))
{
var strText = target.value;
var arrText = strText.split("\r\n");
for(var i = 0; i < arrText.length; i++)
{
$('hta1').value = arrText[i];
var j;
for (j = maxWidth % 5; j < maxWidth + 5; j += 5)
{
$('hta1').style.width = j + 'px' ;
if ($('hta1').scrollHeight == ($('hta1').clientHeight))
break ;
}
if(j > maxWidth)
{
alert('一行の幅が'+ maxWidth + 'pxを超えました。');
$('hta1').style.width = maxWidth + 'px' ;
for (var k = 1; k < arrText[i].length; k++)
{
$('hta1').value
= arrText[i]
= arrText[i].substr(0, arrText[i].length - k);
if ($('hta1').scrollHeight == ($('hta1').clientHeight))
break;
}
change = true;
}
}
}
else if (navigator.userAgent.match(/Firefox/))
{
var strText = target.value;
var arrText = strText.split("\n");
for(var i = 0; i < arrText.length; i++)
{
$('hta2').value = arrText[i];
var j;
$('hta2').style.width = '0px';
$('hta2').style.width = $('hta2').scrollWidth + 'px' ;
j = $('hta2').scrollWidth;
if(j > maxWidth)
{
alert('一行の幅が'+ maxWidth + 'pxを超えました。');
$('hta2').style.width = maxWidth + 'px' ;
for (var k = 1; k < arrText[i].length; k++)
{
$('hta2').value
= arrText[i]
= arrText[i].substr(0, arrText[i].length - k);
$('hta2').style.width = '0px';
if(maxWidth >= $('hta2').scrollWidth)
break;
}
change = true;
}
}
}
else if (navigator.appName == 'Opera')
{
var strText = target.value;
var arrText = strText.split("\r\n");
for(var i = 0; i < arrText.length; i++)
{
$('hta2').value = arrText[i];
var j;
$('hta2').style.width = '0px';
$('hta2').style.width = $('hta2').scrollWidth + 'px' ;
j = $('hta2').scrollWidth;
if(j > maxWidth)
{
alert('一行の幅が'+ maxWidth + 'pxを超えました。');
$('hta2').style.width = maxWidth + 'px' ;
for (var k = 1; k < arrText[i].length; k++)
{
$('hta2').value
= arrText[i]
= arrText[i].substr(0, arrText[i].length - k);
$('hta2').style.width = '0px';
if(maxWidth >= $('hta2').scrollWidth)
break;
}
change = true;
}
}
}
if(change)
target.value = arrText.join("\n");
}
{
var change = false;
if (navigator.appVersion.match(/AppleWebKit|MSIE/))
{
var strText = target.value;
var arrText = strText.split("\r\n");
for(var i = 0; i < arrText.length; i++)
{
$('hta1').value = arrText[i];
var j;
for (j = maxWidth % 5; j < maxWidth + 5; j += 5)
{
$('hta1').style.width = j + 'px' ;
if ($('hta1').scrollHeight == ($('hta1').clientHeight))
break ;
}
if(j > maxWidth)
{
alert('一行の幅が'+ maxWidth + 'pxを超えました。');
$('hta1').style.width = maxWidth + 'px' ;
for (var k = 1; k < arrText[i].length; k++)
{
$('hta1').value
= arrText[i]
= arrText[i].substr(0, arrText[i].length - k);
if ($('hta1').scrollHeight == ($('hta1').clientHeight))
break;
}
change = true;
}
}
}
else if (navigator.userAgent.match(/Firefox/))
{
var strText = target.value;
var arrText = strText.split("\n");
for(var i = 0; i < arrText.length; i++)
{
$('hta2').value = arrText[i];
var j;
$('hta2').style.width = '0px';
$('hta2').style.width = $('hta2').scrollWidth + 'px' ;
j = $('hta2').scrollWidth;
if(j > maxWidth)
{
alert('一行の幅が'+ maxWidth + 'pxを超えました。');
$('hta2').style.width = maxWidth + 'px' ;
for (var k = 1; k < arrText[i].length; k++)
{
$('hta2').value
= arrText[i]
= arrText[i].substr(0, arrText[i].length - k);
$('hta2').style.width = '0px';
if(maxWidth >= $('hta2').scrollWidth)
break;
}
change = true;
}
}
}
else if (navigator.appName == 'Opera')
{
var strText = target.value;
var arrText = strText.split("\r\n");
for(var i = 0; i < arrText.length; i++)
{
$('hta2').value = arrText[i];
var j;
$('hta2').style.width = '0px';
$('hta2').style.width = $('hta2').scrollWidth + 'px' ;
j = $('hta2').scrollWidth;
if(j > maxWidth)
{
alert('一行の幅が'+ maxWidth + 'pxを超えました。');
$('hta2').style.width = maxWidth + 'px' ;
for (var k = 1; k < arrText[i].length; k++)
{
$('hta2').value
= arrText[i]
= arrText[i].substr(0, arrText[i].length - k);
$('hta2').style.width = '0px';
if(maxWidth >= $('hta2').scrollWidth)
break;
}
change = true;
}
}
}
if(change)
target.value = arrText.join("\n");
}
コメントする