|
@@ -28,6 +28,7 @@ class InlineTag extends Component {
|
|
|
this.handleBlur = this.handleBlur.bind(this);
|
|
|
this.handleInput = this.handleInput.bind(this);
|
|
|
this.handleFocus = this.handleFocus.bind(this);
|
|
|
+ this.handleFixClick = this.handleFixClick.bind(this);
|
|
|
}
|
|
|
changeToEdit(e){
|
|
|
const {handledbClick,id} = this.props;
|
|
@@ -80,12 +81,34 @@ class InlineTag extends Component {
|
|
|
}
|
|
|
return style['selected-tag'];
|
|
|
}
|
|
|
-
|
|
|
+ moveEnd(obj) {
|
|
|
+ if(window.getSelection){//ie11 10 9 ff safari
|
|
|
+ obj.focus(); //解决ff不获取焦点无法定位问题
|
|
|
+ var range = window.getSelection();//创建range
|
|
|
+ range.selectAllChildren(obj);//range 选择obj下所有子内容
|
|
|
+ range.collapseToEnd();//光标移至最后
|
|
|
+ }
|
|
|
+ else if (document.selection) {//ie10 9 8 7 6 5
|
|
|
+ var range = document.selection.createRange();//创建选择对象
|
|
|
+ range.moveToElementText(obj);//range定位到obj
|
|
|
+ range.collapse(false);//光标移至最后
|
|
|
+ range.select();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ handleFixClick(){
|
|
|
+ this.moveEnd(this.$span.current);
|
|
|
+ }
|
|
|
+ componentDidMount(){
|
|
|
+ //设置最小宽度避免输入后宽度跳动
|
|
|
+ const spanWidth = window.getComputedStyle(this.$span.current).width;
|
|
|
+ this.$span.current.style.minWidth=spanWidth;
|
|
|
+ }
|
|
|
render(){
|
|
|
const {placeholder,value,prefix,suffix} = this.props;
|
|
|
const inp = this.state.value;
|
|
|
return <div className={this.getStyle()}
|
|
|
onDoubleClick={this.changeToEdit}
|
|
|
+ onClick={this.handleFixClick}
|
|
|
onkeydown={handleEnter}
|
|
|
onBlur={this.changeToClick} ref={this.$box} contentEditable={this.state.editable}>
|
|
|
{prefix}
|
|
@@ -94,6 +117,7 @@ class InlineTag extends Component {
|
|
|
onBlur={this.handleBlur}
|
|
|
onInput={this.handleInput}
|
|
|
onFocus={this.handleFocus}
|
|
|
+ onClick={e=>e.stopPropagation()}
|
|
|
onkeydown={handleEnter}
|
|
|
ref={this.$span}>{value||(inp?'':placeholder)}</span>
|
|
|
{suffix}
|