Reputation: 5272
this is my code so far I tried.I create a wiget it contain a textarea with row lines. I want to change this widgets backround color for Onfocus and OnfocusOut evets. how to do that?
<!doctype html>
<head>
<meta charset="utf-8">
<title>jQuery UI Widget - Default 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>
Upvotes: 0
Views: 372
Reputation: 6722
You can use the below code for both focus
and focusout
this._textarea.focus(function(){
$(this).css('background-image','linear-gradient(rgb(255, 255, 0), rgb(255, 255, 0) 12px, rgb(255, 255, 255) 12px, rgb(204, 204, 204) 13px, white 13px)')});
this._textarea.focusout(function(){
$(this).css('background-image','linear-gradient(rgb(51, 204, 255), rgb(51, 204, 255) 12px, rgb(255, 255, 255) 12px, rgb(204, 204, 204) 13px, white 13px)')
});
Upvotes: 1
Reputation: 837
you need to change this
to $(this)
in your focus
function and backgroun-image
property is blocking you backgound-color
.
so you need to put $(this).css('background-image','none');
this._textarea.focus(function(){
$(this).css('background-image','none'); // add this
$(this).css('background-color','yellow');
}); //<---- this is the //palce the code should come to change color while focus
Upvotes: 1