<input type="number" class="counter" />
<div class="symbols-wrapper">
<div class="symbols-hidden"></div>
<div class="symbols" contenteditable="true">12345abc</div>
</div>.symbols-wrapper {
position: relative;
width: 220px;
height: 120px;
}
.symbols {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.symbols-hidden {
position: absolute;
top: 0;
left: 0;
z-index: 10;
color: transparent;
}
.symbols, .symbols-hidden {
border: none;
padding: 2px;
width: 220px;
height: 120px;
}const text = document.querySelector('.symbols')
const hiddenText = document.querySelector('.symbols-hidden')
text.addEventListener('input', () => {
const counter = document.querySelector('.counter');
// сохраняем текст разрешенной длины
let validText = text.outerText.substring(0, Number(counter.value))
// сохраняем остальной текст
let invalidText = text.outerText.substring(Number(counter.value));
// обнуляем красный span
hiddenText.innerHTML = ""
// добавляем белый span
let span1 = document.createElement('span');
span1.style.background = "";
span1.innerHTML = validText;
// если длина больше указанной в ограничителе, то добавляем красный span
if (invalidText.length > 0) {
let span2 = document.createElement('span');
span2.style.background = "rgba(252, 100, 59, 0.4)";
span2.innerHTML = invalidText;
hiddenText.innerHTML = span1.outerHTML + span2.outerHTML;
} else {
hiddenText.innerHTML = span1.outerHTML;
}
})const phone = document.getElementById('phone');
const phoneFormat = function(e) {
let content = e.target.value;
if(!content) return;
content = Array.from(content).filter(ltr => ltr.charCodeAt(0) > 47 && ltr.charCodeAt(0) < 58);
switch(content[0]) {
case "8":
content[0] = "7";
break;
case "9":
content.unshift("7");
break;
default:
break;
}
let [countryCode, operatorCode, number3, number21, number22] = [
content[0],
content.slice(1,4).join(''),
content.slice(4,7).join(''),
content.slice(7,9).join(''),
content.slice(9,11).join(''),
]
e.target.value = countryCode.length ? `+${countryCode}` : '';
if(operatorCode.length) e.target.value += `(${operatorCode}`;
if(number3.length) e.target.value += `)${number3}`;
if(number21.length) e.target.value += `-${number21}`;
if(number22.length) e.target.value += `-${number22}`;
}
phone.oninput = (e) => phoneFormat(e);<Parent>
<Child1><a data-title="на старт" /></Child1>
<Child2></*что-то для изменения, например param*/></Child2>
</Parent>class Parent extends React.Component {
state = {
naStart: false
}
handleClick = (event) => {
if (event.target.dataTitle === "на старт") {
this.setState({naStart: true})
}
}
render() {
return (
<div>
<Child1 onClick={this.handleClick} />
<Child2 param={this.state.naStart} />
</div>
)
}
}this.state = {
isAlertVisible: false
}
// ...
<Alert isVisible={this.state.isAlertVisible} />handleClick = event => {
// ...
this.setState({isAlertVisible: true}, () => {
setTimeout(
() => {this.setState({isAlertVisible: false})},
3000
)
})
}