选择超过最大字符数的Jquery引导模式通知

在stackers的帮助下，我组合了jquery脚本，它将单击按钮时所需的文本选择复制到相应的输入。今天这里的好人帮我限制了复制到输入中的字符数。现在，我想做一些通知，如果用户在第一个字段中选择超过5个字符，这告诉他这样的话：这个字段最多接受5个字符，您的选择超过了这一点，它将被限制在输入的最大数量。。这样，每个输入都会显示通知。我用Bootstrap创建了一个模式，并将其分配给第一个按钮copy to 1，例如，以显示它的外观。。所选字符数的验证代码未以任何方式设置。。。因此，现在每次按“复制到1”按钮时都会显示模式

现在使用示例模态：

html:

编写这样的代码可能太复杂了吗？除了bootstrap.js插件和它的模式之外，用其他东西解决这个问题会更容易吗

---

您可以自由编辑我的JSFIDLE，只是请帮助我……

您可以测试所选文本的长度，如果长度小于或等于5个字符，您可以调用event.stopPropagation。这将阻止引导侦听器拾取单击事件，因此不会显示模式对话框

下面是一个使用input1的示例，您可以对input2和input3采用相同的策略：

---

非常感谢你！我成功地在所有按钮上设置了：

    <p id="highlighted_text">Aliquam eget ipsum accumsan, convallis 
nulla sit amet, auctor est. Nam quis condimentum eros, vel 
condimentum lacus. In id enim at sem gravida sodales eu vitae risus. 
Morbi sed mi sit amet lectus rhoncus gravida a sit amet nisl. 
Phasellus quis ultricies leo. Duis vel lobortis mauris. 
Suspendisse sed diam eu turpis facilisis rutrum vitae vitae dolor.</p>
<form id="myform" class="form-horizontal">
</fieldset>
<div class="control-group">
    <input type="text" class="input-small" id="input1"> <a href="#attention1" role="button" data-toggle="modal" id="copy1" class="btn btn-primary">Copy to 1</a>

</div>
<div class="control-group">
    <input type="text" class="input-small" id="input2"> <a href="#" id="copy2" class="btn btn-primary">Copy to 2</a>

</div>
<div class="control-group">
    <input type="text" class="input-small" id="input3"> <a href="#"  id="copy3" class="btn btn-primary">Copy to 3</a>

</div>
</fieldset>
</form>

<!-- Modal1 -->
<div id="attention1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Attention!</h3>
  </div>
  <div class="modal-body">
    <p>This field accepts maximum of 5 characters, your selection is more than that and it will be limited to maximum number in input.</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

    // Get user selection text on page
function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

$(document).ready(function () {

$('#copy1').click(function () {
    var selectedText=getSelectedText().toString();
     $('#input1').val(selectedText.substring(0,5));
});
$('#copy2').click(function () {
     var selectedText=getSelectedText().toString();
    $('#input2').val(selectedText.substring(0,2));
});
$('#copy3').click(function () {
     var selectedText=getSelectedText().toString();
    $('#input3').val(selectedText.substring(0,3));
});
});

$('#copy1').click(function (event) {
    var selectedText=getSelectedText().toString();
     $('#input1').val(selectedText.substring(0,5));

    if(selectedText.length <= 5) {
        event.stopPropagation(); //stops modal dialog from being shown
    }

});