Update textbox with value written in a file (Simulate as if user has entered it)

Please let me know how I can create an HTML page with a text box that updates its value periodically (say every 2 seconds) with a value written in a text file.
The code attached does this for me.

I now need one additional feature - I need to simulate the user entering the value (from the file) into the text box by simulating the following procedure:

1. Clicking on the textbox to change focus
2. Entering the value (read from the file)
3. Clicking outside the textbox to remove focus (The click event must be simulated)

PS: The click event must be simulated. It is not enough if just the focus is changed.

If possible, please provide some sample code. Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script language="javascript">
	setInterval( '$("#textboxID").val( $.ajax({"url":"file.text", "async":false}).responseText );', 2000 );
</script>
</head>
<body>
<input id="textboxID" />
</body>
</html>

Open in new window

dshrenikAsked:
Who is Participating?
 
ProculopsisConnect With a Mentor Commented:

Are you looking for something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26641836.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script language="javascript">

var textBox = null;
var index = 0;
var text = "";

function update( box, value ) {
  if ( arguments.length > 1 ) {
    textBox = box;
    text = value;
    textBox.focus();
    index = 0;
  }
  textBox.val( text.substr( 0, ++index ) );
  setTimeout( "update()", 333 );

  if ( index == text.length ) textBox.blur();
}

function repeat() {
  update( $("#textboxID"), $.ajax({"url":"https://updates.opendns.com/nic/update", "async":false, "username":"bogus", "password":"bogus"}).responseText );
}

$(document).ready( function() {

  update( $("#textboxID"), "Loading..." );
  setInterval( 'repeat()', 4000 );

});
</script>
</head>
<body>
<input id="textboxID" />
</body>
</html>

Open in new window

0
 
Justin MathewsConnect With a Mentor Commented:
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script language="javascript">
$(document).ready(function(){
	var txt =  $.ajax({"url":"file.text", "async":false}).responseText;
	$("#textboxID").focus();
	$._int = setInterval("setText('"+txt+"')", 300 );
});

function setText(txt)
{
	var t = $("#textboxID").val();
	if (t.length==txt.length)
	{
		clearInterval($._int);
		$("#textboxID").blur();
		return;
	}
	$("#textboxID").val(txt.substr(0, t.length+1));
}


</script>
</head>
<body>
<input id="textboxID" />
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.