限制文本区域中的中断或过多空格？

Question

谁能帮帮我，我有一个文本区域，我限制了其中的字符数，以便文本区域适合其中的内容而不会溢出。

字符长度有效，但这不会阻止用户当前使用空格键来创建中断或过多的间距，即多个空格。有没有办法让文本区域停止用户多次间隔字符并禁止换行？

对不起，如果这是一个非常明显的问题，但我到处都在寻找答案，却在任何地方都找不到。

<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>

Answer 1

这是删除用户在textarea 中输入的双空格或换行符的方法。

您需要使用最新版本的 jQuery 才能正常工作。

Working example on 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);
});

Answer 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/

Answer 3

如果没有客户端脚本，就不能强加此类限制。

由于您希望最多允许 80 个字符并禁止换行，因此使用 input type=text 元素似乎比使用 textarea 更合适。

此外，对于input type=text，您可以使用HTML5 的pattern 属性施加限制。尽管旧浏览器不支持，但即使客户端脚本被禁用，它也可以在现代浏览器中使用。你可以使用这样的代码：

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

size 属性以（平均宽度）字符指定字段的可见宽度。输入框中的默认字体和字体大小取决于浏览器，但通常字体不是等宽字体，这与textarea 不同。因此，如果需要等宽字体，请在 CSS 中设置。

pattern 属性的值与 JavaScript 正则表达式具有相同的语法，除了匹配的是整个输入字符串（因此隐含了前导 ^ 和尾随 $）。符号\s 表示任何空格字符（在此上下文中，这实际上表示空格），\S 表示任何非空格字符，因此表达式允许空格但不能连续。前导部分\s 允许单个前导空格；如果您不想允许，请将其删除。

您可以使用 JavaScript 在本身不支持该属性但启用了脚本的浏览器中实现 pattern 属性。或者您可以只使用使用相同表达式的 JavaScript（添加 ^ 和 $）。