partially non-editable text input

by Nayana Das

HTML

<input id="field" type="text" value="CAN'T TOUCH THIS!" size="50" />

<div id="output">
</div>

JavaScript

var readOnlyLength = $('#field').val().length;

 $('#output').text(readOnlyLength);

$('#field').on('keypress, keydown', function(event) {
    var $field = $(this);
    $('#output').text(event.which + '-' + this.selectionStart);
    if ((event.which != 37 && (event.which != 39))
        && ((this.selectionStart < readOnlyLength)
        || ((this.selectionStart == readOnlyLength) && (event.which == 8)))) {
        return false;
    }
});