Develop Reference

OnClick event doesn't work in my chrome extension [duplicate]

This question already has answers here:
The Chrome extension popup is not working, click events are not handled
(2 answers)
Closed 5 years ago.
I have made a little extension which inserts buttons into the html page and I have inserted onClick events on each button, but when i press them they don't work. I have found some topics on this site and a guy was talking about addEventListener but i couldn't use it. My code is something like this:
var setButton = "<button type='button' id='setter2' onclick=Set_one(this.id)>set</button>";
var str = getRow.insertCell(-1);
str.innerHTML = setButton;

In Chrome extensions, inline code is forbidden. You cannot use onclick attribute at all for extension scripts, and CSP cannot be relaxed.
You will have to use addEventListener to make it work. It's not hard, and covered in the documentation linked above.
var setButton = "<button type='button' id='setter2' onclick=Set_one(this.id)>set</button>";
var str = getRow.insertCell(-1);
str.innerHTML = setButton;
document.getElementById("setter2").addEventListener("click", function() {
Set_one(this.id);
});
It's even better though if you don't use innerHTML assignment and directly create/append elements:
var setButton = document.createElement("button");
setButton.textContent = "set";
setButton.id = "setter2";
setButton.addEventListener("click", function() {
Set_one(this.id);
});
getRow.insertCell(-1).appendChild(setButton);

Why form input of type text is disabled or read-only

I am trying to resolve a "browser compatibility" issue on our old website, which has a lot of javascript, css and html. they are asp pages, but I'm evaluating what actually is getting sent to the browser.
We have a page that has several text boxes (html input element of type=text) that you can't type into them unless you are on IE 7. Newer versions of IE and other modern browsers, when you click on the text box, you don't even get the flashing I beam cursor. But it momentarily flashes the border.
In Chrome, I right clicked and did Inspect Element, and I removed the text boxes class and all event handlers and the problem remained. Then I inspected the usual suspects: read-only, disabled, enabled, max-length, and they are all unrestricted.
What other DOM properties or style attributes can I check? Should I not assume that just because I removed html in Chrome inspect elements tab, it took effect?
I'm just looking for a list of weird things to check since I'm not primarily a web developer. The fact that it works in an older browser but no newer browsers makes me think that some html, css or javascript has come to be interpreted differently or additional things are being handled that were not handled before. Perhaps the newer browsers have uncovered (brought to the surface) some bad / illogical code.
EDIT:
Here is a fiddle that reproduces the problem, at least in Chrome:
http://jsfiddle.net/2n2sJ/6/
<input type="text"/>
var ns6 = document.getElementById && !document.all
var isMenu = false;
var menuSelObj = null;
var overpopupmenu = false;
function mouseSelect(e) {
var obj = ns6 ? e.target.parentNode : event.srcElement.parentElement;
if (isMenu) {
if (overpopupmenu == false) {
isMenu = false;
overpopupmenu = false;
document.getElementById('menudiv').style.display = "none";
document.getElementById('Div1').style.display = "none";
return true;
}
return true;
}
return false;
}
document.onmousedown = mouseSelect;

When a click or focus event is handled by javascript, and the javascript returns false, this will make the text box appear to be disabled.
Have the handler return true instead of false to allow the event to occur.

My script won't work in IE (even 9)? simple javascript to amend copy text

So I was browsing the internet one day, and copied a chunk of text "my cool text" and pasted it to facebook, only to see that it changed it to "my cool text - Read More at URL", I was in awe! That's awesome!
So I dove in a little and found some tutorials and such. I took to my own to convert it to a customizable plugin with dozens of options, and it outputs this (or similar based on options):
function copyCopyright() {
var theBody = document.getElementsByTagName("body")[0];
var selection;
selection = window.getSelection();
var copyrightLink = '<br /><br />Read more at: '+document.location.href+'<br /> ©2012 ';
var copytext = selection + copyrightLink;
var extraDiv = document.createElement("div");
extraDiv.style.position="absolute";
extraDiv.style.left="-99999px";
theBody.appendChild(extraDiv);
extraDiv.innerHTML = copytext;
selection.selectAllChildren(extraDiv);
window.setTimeout(function() {
theBody.removeChild(extraDiv);
},0);
}
document.oncopy = copyCopyright;​
works GREAT in Chrome and Firefox, etc. But of COURSE it doesn't work in IE (even IE9!). I'm fairly new to Javascript, especially hunting down IE problems with it.
Is there a function or method or something above that IE just won't recognize that I'll have to find an alternate way around?

IE needs
document.body.oncopy=copyCopyright
added to your onload event. (body doesn’t exist until loaded)

jquery replaceWith not working on google chrome

I am facing a strange problem with dynamically replacing controls using javascript in Google Chrome. The replaced controls dont show up in UI but when i use developer tools i am able to locate the replaced element but it does not show up until i close the developer tools. once i open and close developer tools the issue is no longer replicatable until i refresh the page.
This happens only in cases where i am trying to replace outerHTML of an element.
I first tried using jquery's replaceWith api, that dint help so i switched to the following script -
function chromeOuterHTML(oldElem, outerhtml)
{
var el = document.createElement('div');
el.innerHTML = outerhtml;
var parentNode = oldElem.parentNode;
var range = document.createRange();
range.selectNodeContents(el);
var documentFragment = range.extractContents();
parentNode.insertBefore(documentFragment, oldElem);
parentNode.removeChild(oldElem);
}
I dont think that its a problem with my javascript since the problem is specific to chrome and also happens in only certain cases.
Any help would be greatly appreciated

More a diagnostic tool than a solution, but have you tried delaying your insertBefore?
function chromeOuterHTML(oldElem, outerhtml)
{
var el = document.createElement('div');
el.innerHTML = outerhtml;
var parentNode = oldElem.parentNode;
var range = document.createRange();
range.selectNodeContents(el);
var documentFragment = range.extractContents();
setTimeout(function () {
parentNode.insertBefore(documentFragment, oldElem);
parentNode.removeChild(oldElem);
}, 1);
}
In some situations (that I don't fully understand), DOM manipulations can fail if they happen in too quick a succession. This modification will delay (only by 1ms) the insert - it's possible that it will make a difference. It's also possible it'll do nothing!

How to use javascript to edit iframe on design mode with unicode character of foreign language?

I am developing a WYSIWYG editor using the iframe technique. I need to know an idea to set a JavaScript method to overide keyboard event replacing charCode to another CharCode of a different language. For example if I am pressing "a" it will return the Arabic character set in Arabic language keyboard.
UPDATE - 14th May 2011
I have managed to implement a solution as suggested by #Tim only on chrome browser. I have noticed incompatibility of switching the designMode="on" when it is created inside the DOM using javascript. Following is the code and you can also see the test page here - jsfiddle
JAVASCRIPT - JQUERY
$(document).ready(function(){
var textarea = $("#textarea");
var frame = $("<iframe class='thaana-editor-html' id='editable' />");
$(frame).width('500px');
$(frame).height('250px'); $(textarea).parent().prepend(frame);
var iframe = document.getElementById("editable");
var iframeObject = $(iframe).contents().get(0);
iframeObject.designMode = "on";
});
HTML
<div id="content">
<textarea class="thaanaEditor" id="textarea" ></textarea>
</div>
I have tested on
Chrome v11 - works fine
IE8 - works fine
IE9 - not tested yet
Firefox -3.6 & 4 - NOT working - iframe is not editable as in designmode

I've answered a similar question before: Need to set cursor position to the end of a contentEditable div, issue with selection and range objects (see also Changing the keypress). The same technique applies to an editable iframe: you'll need to add the keypress event handler to the iframe's document. For example:
function handleKeypress(evt) {
// See linked answer for implementation
}
var iframe = document.getElementById("your_iframe_id");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
if (iframeDoc.addEventListener) {
iframeDoc.addEventListener("keypress", handleKeypress, false);
} else if (iframeDoc.attachEvent) {
iframeDoc.attachEvent("onkeypress", handleKeypress);
}

As I understand you want to force your user to write with your virtual keyboard, for example when user pressed D you display ي and ...
In Persian we mostly use this javascript library created by Mahdi HashemiNezhad. With this your user can change between Persian & English keyboard. To change the keyboard for your locale, you can replace the Unicode equivalents (for arabic users most of it are in the right place and some ofthem are changed)
let meknow if there is a problem