index.js
1.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import React, { Component } from 'react'
import { Picker} from 'antd-mobile';
import styles from './InputModal.css';
class InputModal extends Component {
constructor(props) {
super(props);
this.state = {
value: props.value || '',
id:props.id || 'input',
placeholder:props.placeholder || '请输入',
}
}
componentWillReceiveProps(nextProps){
console.log('---------WILLreceiveprops------->',nextProps.value,this.state.value)
if(nextProps.placeholder != this.state.placeholder || nextProps.value != this.state.value){
this.setState({
value:nextProps.value,
placeholder:nextProps.placeholder,
})
}
}
onChange = (e)=>{
let value = e.target.value
value = value.substring(0,10)
this.setState({
value :value
})
}
blur =()=>{
setTimeout(function(){
if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
return
}
let result = 'pc';
if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
result = 'ios'
}else if(/(Android)/i.test(navigator.userAgent)) { //判断Android
result = 'android'
}
if( result = 'ios' ){
document.querySelector('body').scrollIntoView();
}
},10)
}
render() {
const { placeholder,value,id} = this.state;
return (
<input className={styles.inputcss}
id={id}
placeholder={placeholder}
value={value}
type="number"
pattern="[0-9]*"
onBlur={::this.blur}
onChange={this.onChange}/>
)
}
}
export default InputModal