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

如果没有客户端脚本，您将无法施加此类限制。

input type=text由于您希望最多允许 80 个字符并禁止换行符，因此使用元素似乎比使用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 中设置。

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

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

于 2013-02-09T07:38:25.687 回答