diff --git a/components/input-item/CustomInput.web.tsx b/components/input-item/CustomInput.web.tsx
index 84047a3ac8c..b1fb1a8747a 100644
--- a/components/input-item/CustomInput.web.tsx
+++ b/components/input-item/CustomInput.web.tsx
@@ -1,5 +1,6 @@
 /* tslint:disable:jsx-no-multiline-js */
 import React from 'react';
+import classNames from 'classnames';
 import CustomKeyboard from './CustomKeyboard.web';
 
 class NumberInput extends React.Component<any, any> {
@@ -9,6 +10,8 @@ class NumberInput extends React.Component<any, any> {
     onBlur: () => {},
     placeholder: '',
     value: '',
+    disabled: false,
+    editable: true,
     prefixCls: 'am-input',
     keyboardPrefixCls: 'am-number-keyboard',
   };
@@ -25,7 +28,8 @@ class NumberInput extends React.Component<any, any> {
   componentWillReceiveProps(nextProps) {
     if ('focused' in nextProps && nextProps.focused !== this.state.focused) {
       this.debounceFocusTimeout = setTimeout(() => {
-        if (nextProps.focused) {
+        const { disabled, editable } = this.props;
+        if (nextProps.focused && !disabled && editable) {
           this.onInputFocus(this.props.value);
         }
       }, 10);
@@ -33,8 +37,8 @@ class NumberInput extends React.Component<any, any> {
   }
 
   componentDidMount() {
-    const { autoFocus, focused, value } = this.props;
-    if (autoFocus || focused) {
+    const { autoFocus, focused, value, disabled, editable } = this.props;
+    if ((autoFocus || focused) && !disabled && editable ) {
       this.onInputFocus(value);
     }
     document.addEventListener('click', this._blurEventListener, false);
@@ -105,10 +109,15 @@ class NumberInput extends React.Component<any, any> {
     const { placeholder, value, keyboardPrefixCls, disabled, editable } = this.props;
     const { focused } = this.state;
     const preventKeyboard = disabled || !editable;
+    const fakeInputCls = classNames({
+      [`fake-input`]: true,
+      [`focus`]: focused,
+      [`fake-input-disabled`]: disabled,
+    });
     return (<div className="fake-input-container">
       {value === '' && <div className="fake-input-placeholder">{placeholder}</div>}
       <div
-        className={focused ? 'fake-input focus' : 'fake-input'}
+        className={fakeInputCls}
         ref="input-container"
         onClick={preventKeyboard ? () => {} : this.onFakeInputClick}
       >
diff --git a/components/input-item/style/CustomKeyboard.less b/components/input-item/style/CustomKeyboard.less
index df31ca12f25..8b580176d96 100644
--- a/components/input-item/style/CustomKeyboard.less
+++ b/components/input-item/style/CustomKeyboard.less
@@ -27,6 +27,10 @@
         color: #000;
         font-size: 34px;
 
+        &.fake-input-disabled {
+          color: @color-text-disabled;
+        }
+
         &.focus {
           transition: color .2s;