0 
<asp:TextBox CssClass="txt" ID="TextBox1" runat="server"
             onkeyup="CountChars(this);" Rows="20" Columns="35" 
             TextMode="MultiLine" Wrap="true">
</asp:TextBox>

複数行のテキストボックスにワードラップを実装する必要があります。ユーザーが1行に35文字を超えて書き込むことを許可することはできません。次のコードを使用しています。このコードは、すべての行で指定された文字を正確に分割し、単語を半分にカットします。これを修正して、現在の行の単語に十分なスペースが残っていない場合に、単語全体を次の行に移動できるようにすることはできますか？

function CountChars(ID) {
    var IntermediateText = '';
    var FinalText = '';
    var SubText = '';
    var text = document.getElementById(ID.id).value;
    var lines = text.split("\n");
    for (var i = 0; i < lines.length; i++) {
        IntermediateText = lines[i];
        if (IntermediateText.length <= 50) {
            if (lines.length - 1 == i)
                FinalText += IntermediateText;
            else
                FinalText += IntermediateText + "\n";
        }
        else {
            while (IntermediateText.length > 50) {
                SubText = IntermediateText.substring(0, 50);
                FinalText += SubText + "\n";
                IntermediateText = IntermediateText.replace(SubText, '');
            }
            if (IntermediateText != '') {
                if (lines.length - 1 == i)
                    FinalText += IntermediateText;
                else
                    FinalText += IntermediateText + "\n";
            }
        }
    }
    document.getElementById(ID.id).value = FinalText;
    $('#' + ID.id).scrollTop($('#' + ID.id)[0].scrollHeight);
}

編集-1

特定の単語区切りなしで合計最大35文字を一列に表示する必要があり、右から2文字のマージンを維持する必要があります。繰り返しになりますが、制限は35文字に制限する必要がありますが、合計37文字のスペースが必要です（可視性の問題のためだけです）。

4

7 に答える 7

0

JakeJのコメントをさらに一歩進めて、

1行に35文字を超える文字があると何かが壊れてしまう場合は、JavaScriptの検証を行うのはあまり良い考えではありません。誰かがjavascriptを無効にしている、または悪意があるかどうかのチェックを破る方法を知っているという問題が発生する可能性があります。このサーバー側を実行する可能性はありますか？おそらく、なぜこれが必要なのかについての少しの情報であり、可能な代替ソリューションを支援することができますか？

  • 各行の文字数が35文字以下であることがビジネスロジックにとって重要な場合は、サーバー上で実行する必要があります。JavaScriptを使用してユーザーインターフェイスを改善することしかできません。ただし、JavaScriptは、サーバー側のロジックを「不正な」入力から保護しません。

  • プレゼンテーションでは、他のすべてからすでに得た提案を使用して、入力フィールドのサイズを35列に制限できます。これにより、サーバーに送信される入力値は変更されませんが、とにかくサーバーで変更する必要があります。お気づきのとおり、新しいブラウザでは、ユーザーはテキストエリアのサイズを変更できます。これは完全にWebのようなものです。ユーザーは自分の好みに応じてプレゼンテーションを調整することができます。背後にビジネスロジックがあるため、本当にそれを制限する必要がある場合に限り、サイズ変更機能を無効にすることができます。

  • ビジネスロジックにとって重要ではなく、プレゼンテーションの問題だけである場合は、代わりにプレーンなスタイルを使用することをお勧めします。35列のサイズのテキスト領域を使用し、ユーザーに任せてサイズを変更します。

備考：

  • JavaScriptを使用して改行を追加して行を折り返す場合、ユーザーがすでに折り返された行を変更するというユースケースに対処することに注意してください。それらを再マージして再ラップしますか、それともますます醜くなりますか？先ほど述べたアプローチでは、それに対処する必要はありません。BrettHoltによって投稿されたjsfiddleを試してください。折り返されるまでテキストを書きます。次に、最初の行に戻っていくつかの文字を削除します（バックスペースを使用すると、FireFoxを使用した場合は削除キーが機能しませんでした）。あなたは私が何を意味するかを見るでしょう。ユーザーは、元の折り返しを削除して、アプリケーションに別の位置で行を再折り返しさせる必要があります。

  • デフォルトでは、テキストエリアのフォントは固定幅フォントであるため、「m」か「l」かに関係なく、各行は35文字に制限されます。ただし、安全を確保し、CSSでフォントを固定に設定することもできます。

  • 「2つの空白」の要件については、正直なところ、それは私にはばかげているように聞こえます。ブラウザがあなたのために何をするかを考えてください。他のすべてのWebサイトおよびWebアプリケーションで機能します。CSSを使用してスタイルを設定します（たとえば、パディングの追加を検討してください）が、JavaScriptハックの追加を開始しないでください。要件がクライアントからのものである場合は、クライアントと話し合って、なぜそれが期待どおりに機能しないのかを説明できると確信しています。

于 2012-06-26T08:23:42.537 に答える
0

asp.netWebアプリで次のJqueryプラグインを使用しています。このコードを開始スクリプトタグの下に置きます。

jQuery.fn.limitMaxlength = function(options){

var settings = jQuery.extend({
attribute: "maxlength",
onLimit: function(){},
onEdit: function(){}
}, options);

// Event handler to limit the textarea
var onEdit = function(){
var textarea = jQuery(this);
var maxlength = parseInt(textarea.attr(settings.attribute));

if(textarea.val().length > maxlength){
  textarea.val(textarea.val().substr(0, maxlength));

  // Call the onlimit handler within the scope of the textarea
  jQuery.proxy(settings.onLimit, this)();
}

// Call the onEdit handler within the scope of the textarea
jQuery.proxy(settings.onEdit, this)(maxlength - textarea.val().length);
}
this.each(onEdit);
return this.keyup(onEdit)
    .keydown(onEdit)
    .focus(onEdit);
}

そして、ドキュメントの準備ができたら、次を追加します。

$(document).ready(function () {

//give the user feedback while typing
var onEditCallback = function(remaining){
$(this).siblings('.charsRemaining').text("Characters remaining: " + remaining);

if(remaining > 0){
    $(this).css('background-color', 'white');
    }
}

var onLimitCallback = function(){
    $(this).css('background-color', 'red');
}

$('textarea[maxlength]').limitMaxlength({
    onEdit: onEditCallback,
    onLimit: onLimitCallback
});

});//end doc ready

次に、各テキストエリアでmaxlength = '35'であることを確認し、フィードバックプレースホルダーを追加します...

<textarea id="TextBox1" class="txt" runat="server" placeholder="Some Text"  maxlength="35" cols="35" rows="2" ></textarea>

お役に立てれば！

于 2012-06-21T18:58:25.800 に答える
0

これはテスト演習です。これにより、35文字で行が途切れます。必ず設定してくださいcols="35"

これがお役に立てば幸いです。

更新：2012年6月26日

JSFiddleリンクを削除しました。自分や他の人からの質問に答えてくれない限り、私は問題を解決しません。

于 2012-06-21T19:27:41.757 に答える
0

http://jsfiddle.net/g4Kez/4/

このコードは、必要に応じてテキストを35文字で折り返す必要があります。これは入力を制限するための奇妙な方法ですが、機能するはずです。（以前のバージョンにはバグがありました。これは最終的にほとんどの部分で機能すると思います）

于 2012-06-21T20:30:28.000 に答える
0

すべての例をありがとう。最終的にはSVGxmlでテキストをワードラップする必要があるため（現在の仕様ではワードラップをサポートしていません）、これに取り組みました。

これも私の編集です。 https://jsfiddle.net/vr_driver/7kr1vfq5/50/

function columncorrector() {
  var text = document.getElementById("TextBox1").value;
  var maxcolumnwidth = 40;
  var lengthSinceNewLine = function(input) {
    var lastNewLine = input.lastIndexOf("\n");
    if (lastNewLine == -1) {
      return input.length;
    } else {
      console.log("lnl: " + lastNewLine);
      console.log("input.length: " + input.length);
      return input.length - lastNewLine;
    }
  };

  console.log(lengthSinceNewLine(text));
  lines = text.split("\n").length;
  console.log("lines: " + lines);

  if (lines == 1) // without this, the first line always comes out one character longer
  {
    maxcolumnwidth_fix = maxcolumnwidth - 2;
  } else {
    maxcolumnwidth_fix = maxcolumnwidth - 1;
  }

  if (lengthSinceNewLine(text) >= maxcolumnwidth_fix) {
    if (text[text.length - 1] == " ") {
      text = text + "\n";
    } else {
      console.log("length:" + text.length);
      console.log(text.lastIndexOf(" "));
      if (text.lastIndexOf(" ") == "-1") {
        console.log("here 1");
        text = text + "-\n"; // a forced hyphen            
        document.getElementById("TextBox1").value = text;
      } else {
        var space = text.lastIndexOf(" ");
        text = text.substring(0, space) + "\n" + text.substring(space + 1, text.length);
        document.getElementById("TextBox1").value = text;
      }

    }
  }
};
.txt {
  width: 400px;
}
<textarea id="TextBox1" class="txt" rows="30" onkeydown="columncorrector()" onkeyup="columncorrector()"></textarea>

于 2019-10-30T01:41:06.560 に答える
-1

これは、35文字（またはその前）で行を分割する単純な関数です。これが現在失敗する唯一のシナリオは、スペースのない35文字を超える場合です。このシナリオでハードブレイクが必要な場合は、お知らせください。追加します。

JSFiddleで機能していることがわかります。GOを押すだけで結果が表示されます。

var breakLines = function () {
    var i, limit = 35, lines = [], result = '', currentLine = '';
    var textBox = document.getElementById('example');
    var text = textBox.value;
    var words = text.split(' ');

    for (i = 0; i < words.length; i++) {
        var extendedLine = currentLine + ' ' + words[i];
        if (extendedLine.length > limit) {
            lines.push(currentLine);
            currentLine = words[i];
        } else {
            currentLine = extendedLine;
        }
    }

    if (currentLine.length > 0) {
        lines.push(currentLine);
    }


    for (i = 0; i < lines.length; i++) {
        result += lines[i] + '\r\n';
    }

    textBox.value = result;
};
于 2012-06-28T14:15:35.563 に答える
-3 
<script type="text/javascript">
    function CountChars(ID) {
        var IntermediateText = '';
        var FinalText = '';
        var SubText = '';
        var Splitted;
        var Concatenated;
        var text = document.getElementById(ID.id).value;
        var lines = text.split("\n");
        for (var i = 0; i < lines.length; i++) {
            IntermediateText = lines[i];
            if (IntermediateText.length <= 50) {
                if (lines.length - 1 == i)
                    FinalText += IntermediateText;
                else
                    FinalText += IntermediateText + "\n";
            }
            else {
                Splitted = IntermediateText.split(' ');
                for (var index = 0; index < Splitted.length; index++) {
                    Concatenated = Splitted[index].length;
                    if (Concatenated + SubText.length <= 50) {
                        if (index + 1 != Splitted.length) {
                            SubText += Splitted[index] + " ";
                        }
                        else {
                            SubText += Splitted[index];
                        }
                    }
                    else {
                        FinalText += SubText + "\n";
                        SubText = "";
                        if (index + 1 != Splitted.length) {
                            SubText = Splitted[index] + " ";
                        }
                        else {
                            SubText = Splitted[index];
                        }
                    }
                }
                if (SubText != '') {
                    FinalText += SubText;
                }
            }
        }
        document.getElementById(ID.id).value = FinalText;
        $('#' + ID.id).scrollTop($('#' + ID.id)[0].scrollHeight);
    }

</script>


<asp:TextBox ID="txt" onkeyup="CountChars(this);" Width="60%" runat="server" Rows="20"
                    Columns="50" TextMode="MultiLine" MaxLength="1000"></asp:TextBox>
于 2012-06-28T06:22:36.573 に答える