I have been working on creating a custom widget with a textarea that has multiple rows. I am now looking to change the background color of this widget on the Onfocus and OnfocusOut events. Can anyone guide me on how to achieve this?
<!doctype html>
<head>
<meta charset="utf-8">
<title>jQuery UI Widget - Custom functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<script>
$(function() {
$.widget("iP.MultilineText", {
_create: function(){
this._textarea = $("<textarea rows ='5'>");
this._textarea.css("background-size","100% 13px");
this._textarea.css("border","none");
this._textarea.css("font-size","12");
this._textarea.css("line-height","12px");
this._textarea.css("background-image","linear-gradient(#33ccff, #33ccff 12px, #ffffff 12px, #ccc 13px, white 13px)");
// this._textarea.css("focus{outline: none;}"");
this._textarea.focus(function(){
this._textarea.css('background-color':'yellow')}); //<---- this is the //palce the code should come to change color while focus
this._textarea.focusout(function(){alert('focust out')});
$(this.element).append(this._textarea);
}
});
$("#mulText").MultilineText();
});
</script>
<div id="mulText" ></div>
</body>
</html>