Jquery Bootstrap modal notification on more than max charaters select

With help of stackers, I've combined jquery script which copies desired selection of text on button click to corresponding input. Today good guy over here helped me to limit a number of characters copied to input. Now I wanna make some sort of notification if user selects (for example on first field) more than 5 characters which tells him something like: "This field accepts maximum of 5 characters, your selection is more than that and it will be limited to maximum number in input.". And so that notification appears for every input there. I've made a modal with Bootstrap and assigned it to first button "copy to 1" for example to show how it should look.. The code for verification of selected number of character is not set up in any way... So the modal now appear every time you press "copy to 1" button..

For now with example modal: 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>

script:

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

is it maybe too complicated to code something like that? Would it be easier to solve it with somethin other than bootstrap.js plugin and it's modal?

You can edit my jsfiddle freely, just please help me some way...