I've created a local HTML page and I can make changes to the textArea with the evaluateJavaScript function.
Everything works fine, but when I click the color change button, the color of the words in the whole textArea changes.
I just want to change the color of the words written after the button is pressed. Like Rich Text Editors.
Any idea about that ?
//this is script functions and working fine
<html>
<head>
<meta charset="utf-8">
<style>
#textarea {
background-color: #000000;
color: #666666;
padding: 1em;
border-radius: 10px;
border: 2px solid transparent;
outline: none;
font-family: "Heebo", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 1.4;
width: 200px;
height: 233px;
}
#textarea:hover {
cursor: pointer;
background-color: #eeeeee;
}
#textarea:focus {
cursor: text;
color: #111111;
background-color: #334455;
border-color: #333333;
}
</style>
</head>
<body>
<textarea id="textarea" placeholder="Enter a message..."></textarea>
<script>
function changeBackgroundColor(colorText) {
document.body.style.background = colorText;
}
function changeTextColor() {
var element = document.getElementById("textarea")
element.style.color = "#FF0000";
}
</script>
</body>
and this is WKWebView function:
evaluateJavaScript("changeTextColor()", completionHandler: nil)