0

誰かが私を助けてくれますか、私にはテキスト領域があり、コンテンツがオーバーフローすることなくテキスト領域がコンテンツに収まるように文字数を制限しています。

文字の長さは機能しますが、現在スペースバーを使用して改行や過度のスペース (複数のスペース) を作成しているユーザーを止めることはできません。テキスト領域でユーザーが複数回文字を空けるのを止め、改行を禁止する方法はありますか?

これが本当に明白な質問である場合は申し訳ありませんが、どこでも答えを探していて、どこにも答えが見つかりません。

<form action="includes/change_status.php" id="form2" method="post" name="form2">
    <div class="status-border-top"></div>

    <div class="status-border">
        <textarea data-id="status" id="status" maxlength="80" name="status" style="width: 187px; margin-top:-4px; text-align:left; padding-left:5px; padding-top:3px; padding-bottom:2px; padding-right:3px; margin-left:-4px; height: 54px; font-size:12px; resize: none; border: hidden; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; position:relative; z-index:100;"><?php echo htmlspecialchars ($profile['status']); ?></textarea>
        <input class="status-submit" id="submit" name="submit" src="../PTB1/assets/img/icons/save-status.png" type="image" value="submit">
    </div>
</form>
4

3 に答える 3

3

これは、ユーザーが に入力したダブル スペースまたは改行を削除する方法ですtextarea。

これを機能させるには、最新バージョンの jQuery を使用する必要があります。

jsFiddle での作業例。

HTML:

<form action="/" method="post">
    <textarea cols="33" rows="12" id="message"></textarea>
</form>

JavaScript:

var $message = $("#message");

$message.on("keydown keypress", function() {    
    var $this = $(this),
        val = $(this).val()
                     .replace(/(\r\n|\n|\r)/gm," ") // replace line breaks with a space
                     .replace(/ +(?= )/g,''); // replace extra spaces with a single space

    $this.val(val);
});
于 2013-02-09T05:38:07.660 に答える
2

jQuery を使用しない別のオプションは、現在割り当てられているキーを以前のキーと比較することです。それらが同じで、両方が不正なキーのセットにある場合は、キー押下アクションを拒否します。このアプローチでは、間隔に関係なく、開始テキストはまったく変更されません。

HTML:

<form action="includes/change_status.php" id="form2" method="post" name="form2">
    <div class="status-border-top"></div>

    <div class="status-border">
        <!-- notice the onkeypress attribute -->
        <textarea data-id="status" id="status" maxlength="80" name="status" style="width: 187px; margin-top:-4px; text-align:left; padding-left:5px; padding-top:3px; padding-bottom:2px; padding-right:3px; margin-left:-4px; height: 54px; font-size:12px; resize: none; border: hidden; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; position:relative; z-index:100;" onkeypress="return ignoreSpaces(event);"><?php echo htmlspecialchars ($profile['status']); ?></textarea>
        <input class="status-submit" id="submit" name="submit" src="../PTB1/assets/img/icons/save-status.png" type="image" value="submit">
    </div>
</form>

Javascript:

var lastkey;
var ignoreChars = ' \r\n'+String.fromCharCode(0);
function ignoreSpaces(e){
    e = e || window.event;
    var char = String.fromCharCode(e.charCode);
    if(ignoreChars.indexOf(char) >= 0 && ignoreChars.indexOf(lastkey) >= 0){
        lastkey = char;
        return false;
    }else{
        lastkey = char;
        return true;
    }
}

JFiddle の作業: http://jsfiddle.net/mLYgD/1/

于 2013-02-09T05:50:37.460 に答える
1

クライアント側のスクリプトがなければ、そのような制限を課すことはできません。

最大 80 文字を許可し、改行を禁止したいinput type=textので、textarea.

また、 に対しては、HTML5属性input type=textを使用して制限を課すことができます。pattern古いブラウザーではサポートされていませんが、クライアント側のスクリプトが無効になっている場合でも、最新のブラウザーで動作します。次のようなコードを使用できます。

<input type="text" data-id="status" id="status" maxlength="80" size="80"
  name="status" pattern="\s?(\S+\s?)*">

このsize属性は、フィールドの表示幅を (平均幅) 文字で指定します。入力ボックスのデフォルトのフォント フェイスとフォント サイズはブラウザによって異なりますが、通常、フェイスは とは異なり等幅ではありませんtextarea。したがって、モノスペース フォントが必要な場合は、CSS で設定します。

属性の値は、patternJavaScript の正規表現と同じ構文を持ちますが、一致が入力文字列全体に対して行われる点が異なります (したがって、先頭^と末尾$が暗示されます)。この表記法\sは、任意の空白文字 (このコンテキストでは、これは実際にはスペースを意味します) を\S意味し、任意の非空白文字を意味するため、式ではスペースを使用できますが、連続して使用することはできません。先頭部分には先頭\sに 1 つのスペースを使用できます。許可したくない場合は削除してください。

JavaScript を使用して、pattern属性をネイティブにサポートしていないが、スクリプトが有効になっているブラウザーに属性を実装できます。または、同じ式を使用する JavaScript (^および$追加) を使用することもできます。

于 2013-02-09T07:38:25.687 に答える