Question

这是我的代码到目前为止我试过了。我创建了一个包含带行线的textarea的wiget。我想为Onfocus和OnfocusOut evets改变这个小部件背景颜色。怎么做？

<!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>

Answer 1

您需要在this函数中将$(this)更改为focus，而backgroun-image媒体资源会阻止您backgound-color。所以你需要把$（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

Answer 2

您可以对focus和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)')
});

如何更改自定义jquery小部件的CSS样式？

2 个答案: