input=number & spin style (arrows)

input-number-spin-style.md

input=number & spin style (arrows)

how to hidden [input=number] browser default spin style

css input type number remove arrows

@charset "UTF-8";
.search-spaces {
    margin-left: 50px;
}

div#spin {
    visibility: none;
}

div[pseudo="-webkit-inner-spin-button"] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
}


/*pseudo="-webkit-inner-spin-button"*/


/*id="spin"*/


/*let s = document.querySelector("#spin");*/

OK

https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

controlled components

受控组件

https://facebook.github.io/react/docs/forms.html#controlled-components

其值由React以这种方式控制的输入表单元素称为“受控组件”。

default HTML form behavior

<form>
    <label>
        Name:
        <input type="text" name="name" />
    </label>
    <input type="submit" value="Submit" />
</form>

Controlled Components

使用受控组件，每个状态突变将具有相关联的处理函数。

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
        this.setState({value: event.target.value});
    }
    handleSubmit(event) {
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" value={this.state.value} onChange={this.handleChange}/>
                </label>
                <input type="submit" value="Submit"/>
            </form>
        );
    }
}

这使得 直接修改 或 验证 用户输入。

例如，如果我们想强制这些名称用全部大写字母写，我们可以把 handleChange 写成：

handleChange(event) {
    this.setState({value: event.target.value.toUpperCase()});
}

HTML5 Form Elements

https://www.w3schools.com/html/html_form_elements.asp
https://www.w3schools.com/html/html_form_input_types.asp
https://www.w3schools.com/html/html_form_attributes.asp

https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_max_min

MDN

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

maxlength HTML5

如果 type 的值是 text, email, search, password, tel, 或 url，那么这个属性指明了用户最多可以输入的字符个数
（按照Unicode编码方式计数）；
对于其他类型的输入框，该属性被忽略。

min HTML5

此项目的最小（数字或日期时间）值不得大于其最大值（最大属性）值。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

[{
        "key": 1,
        "rid": 666,
        "rname": "胡彦斌",
        "uid": 2048,
        "uname": "彦斌",
        "ulname": "西湖 湖底公园"
    },
    {
        "key": 2,
        "rid": 666,
        "rname": "胡彦斌",
        "uid": 2048,
        "uname": "彦斌",
        "ulname": "西湖 湖底公园"
    },
    {
        "key": 3,
        "rid": 666,
        "rname": "胡彦斌",
        "uid": 2048,
        "uname": "彦斌",
        "ulname": "西湖 湖底公园"
    }
]

https://raw.githubusercontent.com/xgqfrms/cdn/gh-pages/json/roles.json

https://cdn.xgqfrms.xyz/json/roles.json

<input type="number">

步进箭头

disable step arrow

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

https://gist.github.com/xgqfrms-gildata/032ff71ce18938f53c5b71051ab4e0eb

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/number

xyzdata/rraio#1