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（添加了^和$）。

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

3 个答案: