This can be done with some vanilla JavaScript. Here are 2 functions written to lock and unlock the input field. Using the input's HTML attribute onfocusout="" we access the event for un-focusing the field, aka leaving the edit mode of the field. I then added a button to unlock it again, as the user will be mighty irritated if he/she managed to put a type-o in there and no alternative is available for fixing it.

The HTML:

<td>
    <span style="font-size: 10pt; font-family: Arial;">
        <input id="signature_input" onfocusout="lock_signature_field()" type="text" style="width: 200px; height: 22px;" fieldname="Field_31">
        <br><br>
    </span>
</td>
<td>
    <button type="button" name="button" onclick="unlock_signature_field()">Edit Signature</button>
</td>

Here's that same HTML again with less clutter, more copy-paste:able:

<td>
    <span>
        <input id="signature_input" onfocusout="lock_signature_field()" type="text"fieldname="name">
        <br><br>
    </span>
</td>
<td>
    <button type="button" name="button" onclick="unlock_signature_field()">Edit Signature</button>
</td>

The JS (put right before the in the bottom of the page):

<script type="text/javascript">

    // set reference to the dom input field
    const signatureField = document.getElementById("signature_input");

    function lock_signature_field() {
        signatureField.setAttribute('readonly', true);
        console.log('Element was locked.'); // you can remove this debug-line if you want.
    }

    function unlock_signature_field() {
        signatureField.removeAttribute("readonly"); // we have to remove the attribute alltogether, cause setting it to false, will do nothing in most browsers.
        console.log('Element was unlocked.'); // you can remove this debug-line if you want.
    }

</script>

Here it is in a jsfiddle!