jquery - 最大文字数を超えるJquery Bootstrapモーダル通知を選択

Question

スタッカーの助けを借りて、ボタンのクリックで必要なテキストの選択を対応する入力にコピーする jquery スクリプトを組み合わせました。今日、ここにいるいい人が、入力にコピーされる文字数を制限するのを手伝ってくれました。ここで、ユーザーが (たとえば最初のフィールドで) 5 文字以上を選択した場合、何らかの通知を行いたいと考えています。番号を入力してください。」. そして、そこにあるすべての入力に対して通知が表示されるようにします。Bootstrapでモーダルを作成し、最初のボタン「1にコピー」に割り当てて、たとえばどのように見えるかを示しました..選択した文字数の検証用のコードはまったく設定されていません...だから"を押すたびにモーダルが表示されるようになりました

今のところモーダルの例: http://jsfiddle.net/dzorz/4JAK2/

html:

    <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));
});
});

そのようなコードを書くのは複雑すぎるのでしょうか? bootstrap.js プラグイン以外のモーダルで解決する方が簡単でしょうか?

私の jsfiddle は自由に編集できます。何らかの方法で助けてください...