|
|
|
|
@ -3,7 +3,7 @@
|
|
|
|
|
* @class BI.Editor |
|
|
|
|
* @extends BI.Single |
|
|
|
|
*/ |
|
|
|
|
import { shortcut, Controller, extend, createWidget, isKey, isEmptyString, isFunction, isNull, trim, } from "../../../core"; |
|
|
|
|
import { shortcut, Controller, extend, createWidget, isKey, isEmptyString, isFunction, isNull, trim } from "../../../core"; |
|
|
|
|
import { Single } from "../0.single"; |
|
|
|
|
import { Input } from "../input/input"; |
|
|
|
|
import { Bubbles } from "../../0.base"; |
|
|
|
|
@ -17,6 +17,7 @@ export class Editor extends Single {
|
|
|
|
|
static EVENT_BLUR = "EVENT_BLUR"; |
|
|
|
|
static EVENT_CLICK = "EVENT_CLICK"; |
|
|
|
|
static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; |
|
|
|
|
static EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN"; |
|
|
|
|
static EVENT_SPACE = "EVENT_SPACE"; |
|
|
|
|
static EVENT_BACKSPACE = "EVENT_BACKSPACE"; |
|
|
|
|
|
|
|
|
|
@ -58,10 +59,10 @@ export class Editor extends Single {
|
|
|
|
|
render() { |
|
|
|
|
const { value, watermark, validationChecker, quitChecker, allowBlank, inputType, hgap, vgap, lgap, rgap, tgap, bgap } = this.options; |
|
|
|
|
// 密码输入框设置autocomplete="new-password"的情况下Firefox和chrome不会自动填充密码
|
|
|
|
|
const autocomplete = this.options.autocomplete ? " autocomplete=" + this.options.autocomplete : ""; |
|
|
|
|
const autocomplete = this.options.autocomplete ? ` autocomplete=${this.options.autocomplete}` : ""; |
|
|
|
|
this.editor = this.addWidget(createWidget({ |
|
|
|
|
type: "bi.input", |
|
|
|
|
element: "<input type='" + inputType + "'" + autocomplete + " />", |
|
|
|
|
element: `<input type='${inputType}'${autocomplete} />`, |
|
|
|
|
root: true, |
|
|
|
|
value, |
|
|
|
|
watermark, |
|
|
|
|
@ -82,7 +83,7 @@ export class Editor extends Single {
|
|
|
|
|
{ |
|
|
|
|
el: { |
|
|
|
|
type: "bi.absolute", |
|
|
|
|
ref: (_ref) => { |
|
|
|
|
ref: _ref => { |
|
|
|
|
this.contentWrapper = _ref; |
|
|
|
|
}, |
|
|
|
|
items: [ |
|
|
|
|
@ -124,30 +125,32 @@ export class Editor extends Single {
|
|
|
|
|
this.fireEvent(Editor.EVENT_BLUR, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_CLICK, (...args) => { |
|
|
|
|
this.fireEvent(Editor.EVENT_CLICK, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_CLICK, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_CHANGE, (...args) => { |
|
|
|
|
this.fireEvent(Editor.EVENT_CHANGE, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_CHANGE, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_KEY_DOWN, (v, ...args) => { |
|
|
|
|
this.fireEvent(Editor.EVENT_KEY_DOWN, v, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_KEY_DOWN, v, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_QUICK_DOWN, (e) => { |
|
|
|
|
this.editor.on(Input.EVENT_QUICK_DOWN, (...args) => { |
|
|
|
|
const [e] = args; |
|
|
|
|
// tab键就不要隐藏了
|
|
|
|
|
if (e.keyCode !== BI.KeyCode.TAB && this.watermark) { |
|
|
|
|
this.watermark.invisible(); |
|
|
|
|
} |
|
|
|
|
this.fireEvent(Editor.EVENT_QUICK_DOWN, ...args); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.editor.on(Input.EVENT_VALID, (...args) => { |
|
|
|
|
this._checkWaterMark(); |
|
|
|
|
this._setErrorVisible(false); |
|
|
|
|
this.element.removeClass("error"); |
|
|
|
|
this.fireEvent(Editor.EVENT_VALID, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_VALID, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_ERROR, (...args) => { |
|
|
|
|
this._checkWaterMark(); |
|
|
|
|
this.fireEvent(Editor.EVENT_ERROR, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_ERROR, ...args); |
|
|
|
|
this._setErrorVisible(this.isEditing()); |
|
|
|
|
this.element.addClass("error"); |
|
|
|
|
}); |
|
|
|
|
@ -157,40 +160,40 @@ export class Editor extends Single {
|
|
|
|
|
tip && tip.element.fadeOut(100, () => { |
|
|
|
|
tip.element.fadeIn(100); |
|
|
|
|
}); |
|
|
|
|
this.fireEvent(Editor.EVENT_RESTRICT, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_RESTRICT, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_EMPTY, (...args) => { |
|
|
|
|
this._checkWaterMark(); |
|
|
|
|
this.fireEvent(Editor.EVENT_EMPTY, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_EMPTY, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_ENTER, (...args) => { |
|
|
|
|
this.fireEvent(Editor.EVENT_ENTER, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_ENTER, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_SPACE, (...args) => { |
|
|
|
|
this.fireEvent(Editor.EVENT_SPACE, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_SPACE, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_BACKSPACE, (...args) => { |
|
|
|
|
this.fireEvent(Editor.EVENT_BACKSPACE, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_BACKSPACE, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_REMOVE, (...args) => { |
|
|
|
|
this.fireEvent(Editor.EVENT_REMOVE, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_REMOVE, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_START, (...args) => { |
|
|
|
|
this.fireEvent(Editor.EVENT_START, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_START, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_PAUSE, (...args) => { |
|
|
|
|
this.fireEvent(Editor.EVENT_PAUSE, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_PAUSE, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_STOP, (...args) => { |
|
|
|
|
this.fireEvent(Editor.EVENT_STOP, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_STOP, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_CONFIRM, (...args) => { |
|
|
|
|
this.fireEvent(Editor.EVENT_CONFIRM, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_CONFIRM, ...args); |
|
|
|
|
}); |
|
|
|
|
this.editor.on(Input.EVENT_CHANGE_CONFIRM, (...args) => { |
|
|
|
|
this.fireEvent(Editor.EVENT_CHANGE_CONFIRM, ...args);
|
|
|
|
|
this.fireEvent(Editor.EVENT_CHANGE_CONFIRM, ...args); |
|
|
|
|
}); |
|
|
|
|
this.element.click((e) => { |
|
|
|
|
this.element.click(e => { |
|
|
|
|
e.stopPropagation(); |
|
|
|
|
|
|
|
|
|
return false; |
|
|
|
|
@ -230,7 +233,7 @@ export class Editor extends Single {
|
|
|
|
|
textAlign: "left", |
|
|
|
|
}); |
|
|
|
|
this.watermark.element.bind({ |
|
|
|
|
mousedown: (e) => { |
|
|
|
|
mousedown: e => { |
|
|
|
|
if (this.isEnabled()) { |
|
|
|
|
this.editor.isEditing() || this.editor.focus(); |
|
|
|
|
} else { |
|
|
|
|
@ -239,7 +242,7 @@ export class Editor extends Single {
|
|
|
|
|
e.stopEvent(); |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
this.watermark.element.bind("click", (e) => { |
|
|
|
|
this.watermark.element.bind("click", e => { |
|
|
|
|
if (this.isEnabled()) { |
|
|
|
|
this.editor.isEditing() || this.editor.focus(); |
|
|
|
|
} else { |
|
|
|
|
|
Zhenfei.Li
2 years ago
