3

HTML 入力フィールド (単一行またはテキストエリア) を作成して、新しいテキストが「いっぱい」になったとき、つまり、ウィジェットに新しい文字を表示するスペースがなくなったときに新しいテキストの受け入れを停止したいと考えています。

これは、文字数に maxlength 制限を設定することとは異なります。たとえば、65 個の小文字の「i」は、プロポーショナル フォントの 65 個の大文字の「W」よりも占有するスペースがはるかに少ないためです。

これを行う方法はありますか？(存在する場合、ソリューションは理想的には、テキストが貼り付けられたときにもカバーし、制限を超えるすべてのテキストを切り捨てます)。

編集: ソリューションはプロポーショナル フォントで動作する必要があります。maxlength はここでは役に立ちません。文字の長さで停止することには関心がありません。

4

3 に答える 3

1

以下は、 https://stackoverflow.com/a/5047712/212869からの回答を使用してテキストの幅を計算し、それをテキストボックスにリンクしました。その本当に大まかなコード:Dですが、テキストボックスをかなりうまく制限します. テキスト領域でも同じ原則を使用できますが、高さと幅の両方でも同じことを行う必要があります。

http://jsfiddle.net/LMKtd/1/ - コンソールに何かを出力するので、見ている場合は開いておくのが最善です。

String.prototype.width = function(font) {
  var f = font || '12px arial',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

  o.remove();

  return w;
}

$('#textinput').on('keyup', validatetext);

function validatetext(e) {
    var w = parseInt(e.target.value.width());
    if (w > 100) {
        console.log("Width Gt 100px ["+w+"px] Char Count ["+e.target.value.length+"]");
        do {
            e.target.value = e.target.value.slice(0,-1);
        } while (parseInt(e.target.value.width()) > 100)
    } else {
        console.log("Keep going! ["+w+"px] Char Count ["+e.target.value.length+"]");
    }
}

アップデート

http://jsfiddle.net/LMKtd/8/

テキスト領域にも 1 つをまとめました。制限を超えるのを止めることはありませんが、幅が広すぎたり高すぎたりすると通知されます。それはあまりきれいではありません:D

String.prototype.width = function(font) {
  var f = font || '12px arial',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'visible', 'font': f})
            .appendTo($('body')),
      w = o.width();
  o.remove();

  return w;
}

String.prototype.height = function(font) {
  var f = font || '12px arial',
      o = $('<div>' + this.replace(/[\r\n]/g,'<br />') + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.height();
  o.remove();

  return w;
}

$('#textinput').on('keyup', validatetext);
$('#areainput').keyup(validatearea);

function validatearea(e) {
    var w = parseInt($(this).val().width());
    var h = parseInt($(this).val().height());
    var errw = false;
    var errh = false;
    if (h>100) {
        errh = true
    }
    var lines = $(this).val().split(/[\r\n]/);
    var errw = false;
    for (var i = 0; i<lines.length; i++) {
        if (parseInt(lines[i].width()) > 100) {
            errw = true;
        }
    }
    if ((errh == true) || (errw == true)) {
        if ((errh == true) && (errw == false)) {
            $('#areaerror').html("Too Tall, Width OK");        
        }
        if ((errh == false) && (errw == true)) {
            $('#areaerror').html("Height OK, Too Wide");        
        }
        if ((errh == true) && (errw == true)) {
            $('#areaerror').html("Too Tall, Too Wide");        
        }
    } else {
        $('#areaerror').html("Were Good");    
    }
}


function validatetext(e) {
    var w = parseInt(e.target.value.width());
    if (w > 100) {
        console.log("Width Gt 100px ["+w+"px] Char Count ["+e.target.value.length+"]");
        do {
            e.target.value = e.target.value.slice(0,-1);
        } while (parseInt(e.target.value.width()) > 100)
    } else {
        console.log("Keep going! ["+w+"px] Char Count ["+e.target.value.length+"]");
    }
}
于 2013-02-22T13:06:00.290 に答える
0

maxlength 属性を使用できます

<input type="text" id="Textbox" name="Textbox" maxlength="10" />
于 2013-02-22T12:35:13.953 に答える
0

jquery inputfit プラグインはどうですか？デモ とソースを確認する

要件に合わせてソースを変更する場合があります。明らかに jquery ライブラリを使用する必要があるため、プレーンな JavaScript でソリューションを探している場合には適していない可能性があります。

オプション（最小サイズ、最大サイズ）を確認して、要件に合っていると思われる

于 2013-02-22T12:51:24.513 に答える