I am using ngPaste on a contentEditable div instead of input type text. However, I am unable to fetch the pasted content in the way mention in this link. I am always getting undefined in my handler for ngPaste. Here's the code:
HTML:
<div contentEditable="true" ng-paste="stripHtml($event.clipboardData.getData('text/plain'))">
</div
>
JS:
scope.stripHtml = function(content) {
console.log(content); //this is always undefined
}
What am I doing wrong? How can I fetch the pasted content?
The Below Code (Modified from Sergey's) Worked in Windows platform, Firefox 43.0.4, Chrome 47.0.2526.111 m but NOT in IE 11.0.9.
<!DOCTYPE html>
<html>
<head>
<style>
.editable {
background: white;
height: 55px;
border: 2px solid blue;
width: 55%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('sampleController', function($scope) {
$scope.stripHtml = function(content) {
alert(content);
console.log(content);
};
});
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>AngularJS ng-paste within ContentEditable Div</title>
</head>
<body ng-app="myApp">
<div ng-controller="sampleController">
<div class="editable" contentEditable="true" ng-paste="stripHtml($event.clipboardData.getData('text/plain'))"></div>
</div>
</body>
</html>
Related
I need update iframe's content on input[text] changed(or on some another event).
For example: I'm typing in parent's input "Hello World!!!", and iframe's <h1>Hi</h1> is changing to
<h1>Hello World!!!</h1> symbol by symbol.
Better if solution will be on jQuery, but vanilla js is ok, too))
Thank you very much.
P.S. Sorry for my bad English(
better way is using Window.postMessage => https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
parent Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a Page..</title>
<style>
body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
iframe { width: 300px; height: 200px; border: 1px solid #4593c6; }
</style>
</head>
<body>
<p>parent input :
<input id="in-Txt" type="text" placeholder="type something">
<button id="Bt-Send2iFrame">Send2iFrame</button>
</p>
<iframe id="in-Frame" src="xyz_frame.html" ></iframe>
<script>
const inText = document.querySelector('#in-Txt')
, btSend = document.querySelector('#Bt-Send2iFrame')
, inFramW = document.querySelector('#in-Frame').contentWindow
btSend.onclick=_=>{
let info = { inTxt: inText.value }
inFramW.postMessage( JSON.stringify(info), "*")
}
</script>
</body>
</html>
iframe page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p> the iframe </p>
<p id="info-Parent">...</p>
<script>
const infoParent = document.querySelector('#info-Parent')
window.onmessage=e=>
{
let message = JSON.parse ( e.data )
infoParent.textContent = message.inTxt
}
</script>
</body>
</html>
You can pass the value on the parent page as a parameter to the iframe.
Say for example the following
Parent HTML,
<input type="text" id="parenteElem">
<iframe id="frameOnParent">
Parent Script:
<script type="text/javascript">
$("#parentElem").on("change", function(event) {
$('#frameOnParent').attr('src', "test.html?param1=" + $(this).val());
})
</script>
Iframe HTML:
<h1>Hi</h1>
Iframe Script:
<script type="text/javascript">
function getHeader() {
var headerText = window.location.search.substring("param1");
return headerText;
}
var heading = getHeader();
$("h1").html(heading);
</script>
I cannot for the life of me figure out why the text under Sub1 and Sub2, do not show the text under them, when clicking them. Only the first link "Main Category" functions. It is making me enter more description, though the issue is already explained the best I know how.
<!DOCTYPE html>
<?php
session_start();
print "
<html>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#body {
font-family: 'Helvetica', Arial, sans-serif;
display:none;
width: 100%;
padding: 5px 0;
text-align: left;
background-color: lightblue;
margin-top: 5px;}
</style>
</head>
<body>
<div id="body12">
Main Category</font>
<div class='showArticle'>
Sub1</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
Sub2</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
</script>
</body>
</html>
You have a typo in your JS $('.commentsTitle').click(...
In the html you assigned the class commentsTitle, in the JS, you referred to commentTitle.
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentsTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentsTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
<body>
<div id="body12">
Main Category</font>
<div class='showArticle'>
Sub1</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
Sub2</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
</body>
</html>
I am learning JavaScript and CSS and made a test project in Visual Studio 2015 Community Edition. The problem that I have is, the function changeTitleCSSStyle isn't called when using Visual Studio 2015 Community Edition. At online editor https://js.do/ and in Google Chrome browser the function call works properly. My code:
index.htm
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/default.css">
<title>JavaScript and HTML</title>
<meta charset="utf-8" />
<script>
function changeTitleCSSStyle() {
alert("Aanroep");
var title = document.querySelector("#mainTitle");
title.style.color = 'black';
title.style.backgroundColor = "yellow";
title.style.border = "5px dashed red";
}
</script>
</head>
<body>
<h1 id="mainTitle">My home page</h1>
<p>This is an example of interactivity between JavaScript and the HTML content of a document.</p>
<button onclick="javascript: changeTitleCSSStyle();">Change style</button>
</body>
</html>
default.css
h1 {
color: red;
background-color: lightGreen;
border: 12px solid violet;
padding: 5px;
border-radius: 15px;
text-align: center;
}
p, h1 {
font-family: cursive;
}
p, img, button {
margin-left: 50px;
}
Not sure why it doesn't work when using VS. Maybe inline click events are not supported for some reason.
Perhaps it works if you try setting the event in your script itself like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript and HTML</title>
<meta charset="utf-8" />
<script>
function changeTitleCSSStyle() {
alert("Aanroep");
var title = document.querySelector("#mainTitle");
title.style.color = 'black';
title.style.backgroundColor = "yellow";
title.style.border = "5px dashed red";
}
document.addEventListener("DOMContentLoaded", function(event) {
var button = document.getElementById('change_style_button')
button.addEventListener('click', function(){
changeTitleCSSStyle()
});
});
</script>
</head>
<body>
<h1 id="mainTitle">My home page</h1>
<p>This is an example of interactivity between JavaScript and the HTML content of a document.</p>
<button id="change_style_button">Change style</button>
</body>
</html>
You can try
<button onclick="changeTitleCSSStyle();">Change style</button>
I have looked up a question on the website (How to display javascript variables in a html page without document.write)
But when executing it in my own coding program it does not work. Hope you can help out!
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset ="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
html {
font-family: sans-serif;
font-size: 16px;
}
h1 {
margin: 1em 0 0.25em 0;
}
input[type=text] {
padding: 0.5em;
}
.jsValue, .jqValue {
color: red;
}
</style>
</head>
<body>
<!-- This <input> field is where I'm getting the name from -->
<label>Enter your name: <input class="name" type="text" value="World"/></label>
<!-- Plain Javascript Example -->
<h1>Plain Javascript Example</h1>Hello <span class="jsValue">World</span>
<!-- jQuery Example -->
<h1>jQuery Example</h1>Hello <span class="jqValue">World</span>
<script>
//https://stackoverflow.com/questions/9689109/how-to-display-javascript-variables-in-a-html-page-without-document-write
// Plain Javascript Example
var $jsName = document.querySelector('.name');
var $jsValue = document.querySelector('.jsValue');
$jsName.addEventListener('input', function(event)){
$jsValue.innerHTML = $jsName.value;
}, false);
</script>
</body>
</html>
Because you have syntax error.. check the console.
Correct code should be:
$jsName.addEventListener('input', function(event){
$jsValue.innerHTML = $jsName.value;
}, false);
I want to create a website where I can write and preview a website. The problem is that I want to preview it in an iframe, because then the website isn't influenced by the HTML code around the iframe.
Is there a way to show a webpage in an iframe tag with a string as source instead of an URL?
This is how it should look (just an iframe).
<textarea onkeyup="document.getElementById("body").innerHTML=this.value;"></textarea>
<div id="body"></div>
In fact, JSFiddle does the same, so there must be a way. Ideas?
You can modify the content of the document specified by the src attribute, using contentWindow.document. So, assuming you had a <textarea> with the markup you want to preview, you could do something like this:
Editor document:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Edit iframe example</title>
<style>
.editors, .preview { float: left; display: block; }
.editors { width: 500px; margin-right: 25px; }
.editors textarea { width: 100%; height: 300px; }
.preview { width: 800px; }
.preview iframe { width: 100%; height: 800px; }
</style>
</head>
<body>
<div class="editors">
<p>
<label>CSS</label>
</p>
<p>
<textarea id="preview-editor-CSS" onkeyup="updatePreviewCSS(this)"></textarea>
</p>
<p>
<label>HTML</label>
</p>
<p>
<textarea id="preview-editor-HTML" onkeyup="updatePreviewHTML(this)"></textarea>
</p>
</div>
<div class="preview">
<iframe id="preview" src="preview.html"></iframe>
</div>
<script>
function updatePreviewHTML(elem) {
var frame = document.getElementById('preview');
var content = elem.value;
frame.contentWindow.document.body.innerHTML = content;
}
function updatePreviewCSS(elem) {
var frame = document.getElementById('preview');
var content = elem.value;
frame.contentWindow.document.getElementsByTagName('style')[0].innerHTML = content;
}
</script>
</body>
</html>
The "preview" document:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Preview iframe example</title>
<style></style>
</head>
<body>
</body>
</html>
I've only tried this locally, on Firefox 31, so caveat emptor.