Is there any change to have input element similar like is on my screenshot.
I would like to change value via javascript and highlight part of text with different color if it will be wrapped with *
Thanks for any help.
You cannot do it with an input element. Here is one alternative:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/*style it to look like input element*/
[contenteditable] {
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="contentDiv" contenteditable>sdfsdtokendfdfsdfs</div>
<br/>
<input type="button" onclick="test()" value="Click me"/>
<script type="text/javascript">
function test() {
// this is our token
var valueToSelect = "tokendfdf";
var contentDiv = document.getElementById('contentDiv');
// check if div contains wanted token
if (contentDiv.innerHTML.indexOf(valueToSelect) >= 0) {
// create span with wanted color
var replaceString = '<span style="color: red">*' + valueToSelect + '*</span>';
// replace the string with colored span
contentDiv.innerHTML = contentDiv.innerHTML.replace(valueToSelect, replaceString);
}
}
</script>
</body>
</html>
Here is JS Bin example
Related
so I’m trying to make a button that copy’s the paragraph tag with the ID of “n” onto the clipboard, but I keep getting errors saying that select is not a function, and other things are not a function, what am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320, initial-scale=1">
<meta charset="utf-8">
<style>
body, html {
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
font: Arial 14px;
}
</style>
<script>
function n() {
var ntext = document.getElementById("n");
ntext.select();
ntext.setSelectionRange(0, 99999);
document.execCommand("copy");
alert("could be copied")
}
</script>
</head>
<body>
<input>
<button onclick="n()">
Click
</button>
<p id="n">
ee
</p>
</body>
</html>
That only works on input fields. For you, since you are copying from an paragraph, you can try this:
<!DOCTYPE html>
<html>
<body>
<script>
function CopyToClipboard(id){
var r = document.createRange();
r.selectNode(document.getElementById(id));
window.getSelection().removeAllRanges();
window.getSelection().addRange(r);
document.execCommand('copy');
window.getSelection().removeAllRanges();
}
</script>
<p id="sample">Hello World</p>
Copy Text
</body>
</html>
You can just edit this now to your preference.
Source:
https://edupala.com/javascript-clipboard/
This question already has answers here:
css javascript style sheet disabled?
(3 answers)
Closed 4 years ago.
I have an question about modify the tag type attribute problem. In my case, I want to dynamicly change the type to make it work or disabled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style r = "1" type = "text/css">
h1 {
font-size: 20px;
}
</style>
<style r = "2" type = "not work">
h1 {
font-size: 40px;
}
</style>
</head>
<body>
<script>
var style1 = document.querySelector('[r="1"]')
var style2 = document.querySelector('[r="2"]')
</script>
<h1>this text can be either 20px or 40px</h1>
<input type="button" value="make text 20px" onclick = "style1.type='text/css';style2.type='not work'">
<input type="button" value="make text 40px" onclick = "style2.type='text/css';style1.type='not work'">
</body>
</html>
So here's the example : click me
It works on chrome, but nor work in ie11, safari. Anybody can help ? Thanks a lot.
Addition: What i am doing is to change page style depends on some condition, say: language. In some reason I cant use mvvm framework.
That's not how you do it, actually. It's bad practice to change styles this way. It's better to change just one element style and not whole page style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type = "text/css">
h1 {
font-size: 20px;
}
</style>
</head>
<body>
<script>
function changeStyle(fontSize) {
var heading = document.querySelector('h1')
heading.style.fontSize = fontSize;
}
</script>
<h1>this text can be either 20px or 40px</h1>
<input type="button" value="make text 20px" onclick = "changeStyle('20px')">
<input type="button" value="make text 40px" onclick = "changeStyle('40px')">
</body>
</html>
I tried to copy value from div to textarea and it works. But I want to use content of textarea in my javascript and if I don't click in text area and use for example "space bar" it doesn't work :/ I need to click here and write anything to make it work. But I want to make it work without editing anything manually. I want to have in textarea only copy of div. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title>
<style type="text/css" media="screen">
#editor {
margin-left: 15px;
margin-top: 15px;
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="src-min/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<div id="editor"></div>
<textarea id="input"></textarea>
<script src="bundle.js"></script>
<form id="myForm">
<input type="hidden" id="output">
</form>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
var code = editor.getSession().getValue();
console.log(code);
console.log(document.getElementById('output').innerHTML);
var test = document.getElementById('input');
console.log(test.value);
}
var textarea = $('#input');
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/sh");
editor.getSession().on('change', function () {
textarea.val(editor.getSession().getValue());
});
textarea.val(editor.getSession().getValue());
</script>
</body>
</html>
And "budle.js" file:
var input = document.getElementById('input');
var error = document.getElementById('error');
input.addEventListener('change', update);
input.addEventListener('input', update);
function update() {
try {
var value = parse(input.value);
output.textContent = JSON.stringify(value, null, 2);
error.textContent = '';
} catch (e) {
error.textContent = String(e);
}
}
#edit
So I want to send content of textarea without any integration, but like now I need to click for example spacebar in it to make it work :/
This is my javascript for replacing some text:
document.body.innerHTML = document.body.innerHTML.replace(/Sometext/g, 'difference');
Ho do I change color, font-size, font and such?
I need to link my script like this, can't use { otherwise:
<script>$(document).ready($.getScript("url"));</script>
I though something like this would work:
window.onload = function() {
document.body.innerHTML =
document.body.innerHTML.replace(/Deckling/g, result);
}
var str = "The Liberator";
var result = str.fontcolor("Red").italics().fontsize(6);
result.style.fontFamily = "Harrington";
Any help? (first post and very limited Knowledge)
You can wrap you text in a div or span tag, select it in JS applying a class.
The class will contains the style for your text.
Just a quick example in vanilla javaScript (no jquery):
http://jsbin.com/yufiteseme/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a {
color:red;
font-style: italic;
font-size: 6px;
{
</style>
<script>
function changeColor(){
document.getElementById('text').classList.add('a');
}
</script>
</head>
<body onload="changeColor()">
<div id="text">
Test for example
</div>
</body>
</html>
You can change style of an html element using javascript, put your script below the element.
The following example changes the style of a 'p' element using javascript:
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").style.color = "red";
document.getElementById("p1").style.fontFamily = "Arial";
document.getElementById("p1").style.fontSize = "larger";
</script>
</body>
</html>
You can also change style of an html element using jquery.
The following example changes the style of a 'p' element using jquery:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$('#p1').ready(function(){
$('#p1').css({"color": "green"}).css({"fontFamily": "Arial"}).css({"fontSize": "24px"});
});
</script>
</head>
<body>
<p id="p1">Hello World!</p>
</body>
</html>
That will not work:
var result = str.fontcolor("Red").italics().fontsize(6);.
You need to add css to change the surface.Add this to your header:
.textstyle{
font-size:16px;
font-family:Harrington;
}
</style>
And add this to your window.onload:$('body').addClass('textstyle');
I'm working on a page that has a div with the id "exam" and a button with the id "copy". The div includes the text "Exam 1" and has a 2px double black border around it. When the button is clicked, the div element is supposed to be duplicated and displayed below each time the button is clicked. I have gotten that part to work, however, it doesn't seem to be copying the div element's CSS, only the text inside the element, so each time I click the button, it's only displaying "Exam 1", but not the border.
Here is my HTML (this also includes the Javascript and CSS):
<html>
<head>
<title>Exam 1 Tanner Taylor</title>
<style type="text/css">
#exam {
border: 2px double black;
}
</style>
</head>
<body>
<div id="exam">
Exam 1
</div>
<input type="button" id="copy" value="Make Copy" onclick="copy()" >
</body>
<script type = "text/javascript">
var TTi = 0;
var TToriginal = document.getElementById("exam");
function copy() {
var TTclone = TToriginal.cloneNode(true);
TTclone.id = "exam" + ++TTi;
TToriginal.parentNode.appendChild(TTclone);
}
</script>
</html>
There's more to it, but I cut out the portions that didn't deal with this particular issue. Any ideas as to why it's not displaying the border around the text when the button is clicked?
The css is only targeting the id exam and all clones are changing that id. A possible solution would be to use [id^="exam"].
^= says if it starts with "exam" then use this style.
DEMO: http://jsbin.com/xupuqavecope/2/edit
<html>
<head>
<title>Exam 1 Tanner Taylor</title>
<style type="text/css">
[id^="exam"] {
border: 2px double black;
}
</style>
</head>
<body>
<div id="exam">
Exam 1
</div>
<input type="button" id="copy" value="Make Copy" onclick="copy()" >
</body>
<script type = "text/javascript">
var TTi = 0;
var TToriginal = document.getElementById("exam");
function copy() {
var TTclone = TToriginal.cloneNode(true);
TTclone.id = "exam" + ++TTi;
TToriginal.parentNode.appendChild(TTclone);
}
</script>
</html>