JSFiddle - React, Tailwind, and code Playground

HTML

<div>
        <input name="TextBox1" type="text" value="...satest.xml" id="TextBox1">
        <input type="hidden" name="HiddenField1" id="HiddenField1" value="C:\Programs\anotherfolder\blabla\thisisatest.xml">
        <input type="hidden" name="HiddenField2" id="HiddenField2" value="...satest.xml">
    </div>

JavaScript

$(document).ready(function () {
            $('#TextBox1').focus(function () {
                $('#TextBox1').val($('#HiddenField1').val());
            });

            $('#TextBox1').blur(function () {
                $('#TextBox1').val($('#HiddenField2').val());
            });
        });