diff --git a/src/base/single/button/button.basic.js b/src/base/single/button/button.basic.js index d975bdb81..5640dea30 100644 --- a/src/base/single/button/button.basic.js +++ b/src/base/single/button/button.basic.js @@ -11,6 +11,9 @@ BI.BasicButton = BI.inherit(BI.Single, { return BI.extend(conf, { _baseCls: (conf._baseCls || "") + " bi-basic-button" + (conf.invalid ? "" : " cursor-pointer") + ((BI.isIE() && BI.getIEVersion() < 10) ? " hack" : ""), // el: {} // 可以通过el来创建button元素 + attributes: { + tabIndex: 1 + }, value: "", stopEvent: false, stopPropagation: false, @@ -204,6 +207,12 @@ BI.BasicButton = BI.inherit(BI.Single, { }); } hand.click(clk); + // enter键等同于点击 + hand.keyup(function (e) { + if (e.keyCode === BI.KeyCode.ENTER) { + clk(e); + } + }); break; } }); @@ -403,8 +412,10 @@ BI.BasicButton = BI.inherit(BI.Single, { BI.BasicButton.superclass._setEnable.apply(this, arguments); if (enable === true) { this.element.removeClass("base-disabled disabled"); + this.element.attr("tabIndex", 1); } else if (enable === false) { this.element.addClass("base-disabled disabled"); + this.element.removeAttr("tabIndex"); } if (!enable) { if (this.options.shadow) { diff --git a/src/less/base/single/button/button.less b/src/less/base/single/button/button.less index a4657294c..d8f511c01 100644 --- a/src/less/base/single/button/button.less +++ b/src/less/base/single/button/button.less @@ -7,6 +7,7 @@ body .bi-button, #body .bi-button { .border-radius(0px); } .border-radius(2px); + outline: 0; border: 1px solid @color-bi-border-button; background-color: @color-bi-background-button; .box-sizing(border-box); @@ -22,7 +23,7 @@ body .bi-button, #body .bi-button { font-size: inherit; border-width: 0; background-color: transparent; - &:hover { + &:hover, &:focus { .opacity(0.8); } &:active { @@ -47,7 +48,7 @@ body .bi-button, #body .bi-button { &, & .b-font:before { color: @color-bi-text-common-ghost-button; } - &:hover { + &:hover, &:focus { color: @color-bi-text; background-color: @color-bi-background-hover-common-ghost-button; } @@ -73,7 +74,7 @@ body .bi-button, #body .bi-button { border-width: 0; } &.ghost { - &:hover { + &:hover, &:focus { border-color: @color-bi-border-ignore-button; &, & .b-font:before { color: @color-bi-text-ignore-button; @@ -103,7 +104,7 @@ body .bi-button, #body .bi-button { color: @color-bi-text-success-ghost-button; } background-color: transparent; - &:hover { + &:hover, &:focus { color: @color-bi-text; background-color: @color-bi-background-success-button; } @@ -132,7 +133,7 @@ body .bi-button, #body .bi-button { color: @color-bi-text-warning-ghost-button; } background-color: transparent; - &:hover { + &:hover, &:focus { color: @color-bi-text; background-color: @color-bi-background-warning-button; } @@ -161,7 +162,7 @@ body .bi-button, #body .bi-button { color: @color-bi-text-error-ghost-button; } background-color: transparent; - &:hover { + &:hover, &:focus { color: @color-bi-text; background-color: @color-bi-background-error-button; } @@ -208,7 +209,7 @@ body .bi-button, #body .bi-button { } background: transparent !important; border-width: 0 !important; - &:hover, &:active { + &:hover, &:focus, &:active { .opacity(1); } } @@ -285,7 +286,7 @@ body .bi-button, #body .bi-button { .opacity(0.1); .transition(@activeStopVal) } - &:hover{ + &:hover, &:focus { & .bi-button-mask { .opacity(0.1); background-color: @color-bi-background-hover-button-mask; @@ -317,7 +318,7 @@ body .bi-button, #body .bi-button { .opacity(0.1); .transition(@activeStopVal) } - &:hover { + &:hover, &:focus { &:not(.clear, .ghost) { background-color: @color-bi-background-hover-ignore-button-mask; } @@ -333,10 +334,10 @@ body .bi-button, #body .bi-button { .bi-button, #body .bi-button { &.button-ignore { background-color: @color-bi-background-ignore-button-theme-dark; - &:hover{ + &:hover, &:focus { background-color: @color-bi-background-hover-ignore-button-theme-dark; } - &:active{ + &:active { background-color: @color-bi-background-active-ignore-button-theme-dark; } &.clear {