如何更改文本框(dijit/form/TextBox）焦点颜色

How to Change TextBox (dijit/form/TextBox) Focus color

本文关键字：form TextBox 焦点 颜色 dijit 何更改 文本      更新时间：2023-09-26

我试图创建TextBoxEx，它扩展了dijit/form/TextBox。TextBoxEx覆盖焦点（请参阅下面的代码），但TextBox不会更改背景颜色。它总是透明的。我的错是什么？

define([
    "dojo/_base/declare", // declare
    "dijit/form/TextBox",
    "dojo/on",
    "dojo/_base/event",
    "dojo/dom-style"
], function(declare, TextBox, on, event, domStyle) {
    var widget = declare("common.TextBoxEx", [TextBox], {
        inputLanguage : '',
        focusColor : '#F5EC9B',
        selectOnClick : true,
        _onFocus: function(e){
            try{
                if(this.disabled || this.readOnly){ return; }
                this.inherited(arguments);
                this._updatePlaceHolder();
                var evt = document.createEvent("Events");
                if(this.inputLanguage == 'en'){
                    evt.initEvent   ('switchToEng', true, false);
                    window.dispatchEvent(evt);
                }
                else if(this.inputLanguage == 'th'){
                    evt.initEvent('switchToThai', true, false);
                    window.dispatchEvent(evt);
                }
                var dom = this.focusNode;
                var focusColor = this.focusColor;
                setTimeout(function() {
                    dom.select();
                    domStyle.set(dom, 'background-color', focusColor);
                }, 200);
            }
            catch(e){
                console.log(e)
            }
        },
    });
    return widget;
});

实际上不需要像这样设置背景颜色。只需使用css即可：

.myTextBoxClass.dijitTextBox.dijitFocused .dijitInputInner {
  background-color: gray;
}

只需将.myTextBoxClass更改为您给文本框的任何类即可。

使用！重要的这种类型的工作只能使用CSS来完成。

相关文章：