Question

我可以根据另一个控件的状态操作控件，如this jsfiddle所示，其中复选框的状态会改变文本框的宽度和背景颜色。

HTML是：

$(document).on("change", '[id$=ckbxEmp]', function () {
    if ($(this).is(":checked")) {
        $('[id$=txtbxSSNOrITIN]').css('background-color', '#ffff00');
        $('[id$=txtbxSSNOrITIN]').css('width', '24');
    } else {
        $('[id$=txtbxSSNOrITIN]').css('background-color', 'green');
        $('[id$=txtbxSSNOrITIN]').css('width', '144');
    }
});

jQuery是：

BULK INSERT DatabaseName.dbo.TableName
FROM '\\shared_server\parent\child\file_name.txt' 
WITH(FIRE_TRIGGERS, DATAFILETYPE='char', FIELDTERMINATOR='\t',ROWTERMINATOR='\n', FIRSTROW=2);

但除此之外，我真正需要做的是根据复选框的状态限制用户输入文本框的字符数。我怎么能这样做，最好是用CSS，但如果有必要的话，jQuery？

Answer 1

<强> jsFiddle

首先，将maxlength设置为：<input type="text" id="txtbxSSNOrITIN" maxlength="5">

$(document).on("change", '[id$=ckbxEmp]', function () {

    var ckd = this.checked;                        // ckd is now a boolean 
    $('[id$=txtbxSSNOrITIN]')
        .attr("maxlength", ckd? 2 : 5)             // 2 characters if checked, else 5
        .css({
            background: ckd? '#ffff00' : "green",  // yellow if checked, else green
            width: ckd? 24 : 144                   // 24px if checked, else 144
        });

});

上面还有一个较小的问题，如果是：用户最初输入超过5个字符，如果单击复选框，则值长度仍为5！因此，您需要一个额外的条带，以删除不需要的字符，如：

$(document).on("change", '[id$=ckbxEmp]', function () {

    var ckd = this.checked;
    $('[id$=txtbxSSNOrITIN]').attr("maxlength", ckd? 2 : 5).css({
       background: ckd? '#ffff00' : "green",
       width: ckd? 24 : 144
    }).val(function(i, v){
       // If checked, slice value to two characters:
       return ckd && v.length>2 ? v.slice(0,2) : v;
    });

});

如果您想使用您构建的代码 go-pro ，您可能还需要另外 阻止用户感到愚蠢
通过存储最后一个（长一个）类型的值。如果用户点击了复选框，而不是实现＆＃34;那么......那是愚蠢的＆＃34; ，再次勾选 off 他应该回到原来的价值：

<强> jsFiddle

$(document).on("change", '[id$=ckbxEmp]', function () {   

    var ckd = this.checked;
    var $input = $('[id$=txtbxSSNOrITIN]');
    if(ckd) $input.data("oldValue", $input.val() ); // Remember the current value

    $input.prop("maxlength", ckd? 2 : 5).css({
        background: ckd? '#ffff00' : "green",
        width: ckd? 24 : 144
    }).val(function(i, v){
        // If checked, slice value to two characters:
        return ckd && v.length>2 ? v.slice(0,2) : $input.data("oldValue");
    });

});

Answer 2

我认为不可能使用CSS。

jquery / javascript方法将在输入字段中设置默认的maxlength，然后在复选框事件中更改它的属性。然后可以将数值绑定到CSS属性。

Evaluation

如果缩小到较短的长度，还必须裁剪文本。

参考： Can I specify maxlength in css?

Answer 3

使用<p>@Html.ActionLink("Read »", "Index", "News", null, new { @class = "btn btn-default" })</p>无法做到这一点。只需通过CSS

将maxlength属性添加到输入字段即可

jQuery

Answer 4

你这样做的方式与更改样式相同：

$('#txtbxSSNOrITIN').attr('maxlength', '2');

另请注意我如何替换选择器#txtbxSSNOrITIN。这是一种更好，更快的方法来选择id。

$('#txtbxSSNOrITIN').attr('maxlength', '10');

如果未选中复选框（仅作为示例）

，则会发生这种情况

如果maxlength属性受到限制，请不要忘记切断用户输入的值

$('#txtbxSSNOrITIN').val($('#txtbxSSNOrITIN').val().substr(0,2));

这发生在if块中。在这里你的小提琴修改了：

http://jsfiddle.net/jy6t5oru/7/

Answer 5

如果你不介意的话。采取我的方法：maxlength

<input type="text" maxlength="10" />

如何使用CSS（或jQuery，如有必要）限制输入HTML输入的字符数？

5 个答案: