jQuery focus() issue.

**cations** · 06-06-2012, 09:23 PM

Dear JavaScript Expert.

I would like the cursor / caret to be focused in my newly created text area when the below event is triggered. For some reasons it's not happening. Perhaps I am not understanding the jQuery documentation. Can you see the below code and advise?

Thank you.

Code:

$(".addTextArea").click(function(){
	
	var $this = $(this);
	
	//clone a new textArea
	var $textArea= $("#textAreaTemplate").clone(true);
	
	//assign a unique identifier.  Note intID is a global incrementer.  In the actual code it gets incremented.
	$textArea.attr("id", "textArea" + intId);
	
	//*** doesn't put the caret into the new text Area.
	$this.parent().after($textArea).focus();
	
	//*** this doesn't work either
	$("#textArea" + intId).focus();
	
});

**Padonak** · 06-07-2012, 03:45 PM

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>...</title>
<style type="text/css">
body{font-family:Georgia,Verdana,Arial;font-size:13px;background-color:#fff;color:#000;padding:30px 0px 0px 300px;margin:0px 0px 0px 0px;}
.newtextarea{display:block;margin-top:15px;}
.addTextArea{margin-left:30px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".addTextArea").click(function(){
var tarlen=$('textarea').length+1;
$('#textAreaTemplate').clone().appendTo($(this).parent()).addClass('newtextarea').attr('id','textArea_'+tarlen).attr('title','textArea_'+tarlen).focus();
});
});
</script>
</head>
<body>
<div>
<textarea id="textAreaTemplate" rows="4" cols="20"></textarea><input class="addTextArea" type="button" value="Add a new textarea" />
</div>
</body>
</html>

**Jeff Mott** · 06-07-2012, 09:42 PM

Originally Posted by cations

Code:

$this.parent().after($textArea).focus();

The problem is that the node set jQuery is operating on is still $this.parent(), not $textArea. You'll probably have to write the focus as a separate statement.

Code:

$this.parent().after($textArea);
$textArea.focus();

**cations** · 06-08-2012, 08:21 AM

I got it to work. Thank you.

Thread: jQuery focus() issue.

Thread Tools

Display

jQuery focus() issue.

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions