We Keep Coding

Remove an event listener that was added from a chrome extension?

I can't use removeEventListener on document via a button in my chrome extension.
I've had a good read about isolated worlds but I can't understand exactly what I'm supposed to do here. I'm not even sure that the popup script also is subject to an isolated world context?
I'm checking for the existence of a hidden field. When that hidden field is detected, the code is supposed to remove the event listener, but it's like it doesn't exist. This is my popup.js:
function toggle_clare(){
if(!document.getElementById("clare_on")){ //check for existence of hidden field
var clare_status = document.createElement("input");
clare_status.type = "hidden";
clare_status.id = "clare_on";
clare_status.value = "on";
document.body.appendChild(clare_status); //add it to document if doesn't exist
document.addEventListener("keyup", read_out, true); //add keyup listener
return clare_status.value; //send "on" to the button in the popup
}
else if(document.getElementById("clare_on")){ //alread exists
var off = "off";
$("#clare_on").remove();//remove the hidden field
document.removeEventListener("keyup", read_out, true);//not working
return off; // send "off" to the button
}
}
//Function call
document.getElementById( "clare_button" ).addEventListener( "click",
function(){
chrome.tabs.executeScript({
code: '(' + toggle_clare + ')()'
}, ( results ) => { // receive "on" or "off" from toggle_clare function
document.getElementById("clare_button").innerText = "Clare is now " + results[0];
})
})
I was expecting this to remove the event listener when the hidden field is removed. ALL of this code works except removeEventListener.

Select textarea, focus it and simulate pressing a space bar

When user clicks on an img i want to add it's alt value into textarea and add a space to it as if user pressed it himself but not like this el.value += ' ';
Code :
var chatInput = document.querySelector('textarea[data-a-target="chat-input"]'); //textarea selector
var chatSend = document.querySelector('button[data-a-target="chat-send-button"]');
emoteList.addEventListener('click', function(e){
if(e.target.nodeName == 'IMG'){
chatInput.focus();
chatInput.value += e.target.alt;
}
})
The text gets added into textarea, but textarea change event doesn't fire.
What would be the best way to do this? I have spent hours using both Javascript and jQuery to make it work using events but i can't get it right.
I tried focusing on textarea and using dispatch/fire event on window but it does nothing.
I tried firing keypress on textarea but it has no effect either.

if your problem is that change event is not triggering then you can manually trigger it by
var e = $.Event( "change" );
$("#altArea").trigger(e);

Don't need jQuery for this - just use chatInput.dispatchEvent(new Event('change'));.
const chatInput = document.querySelector('textarea');
chatInput.addEventListener('change', () => {
console.log('saw a change');
})
const chatSend = document.querySelector('button');
document.querySelector('#emote-list').addEventListener('click', (e) => {
if(e.target.nodeName !== 'DIV') return;
chatInput.focus();
chatInput.value += 'foo ';
chatInput.dispatchEvent(new Event('change'));
})
<textarea></textarea>
<div id="emote-list">click</div>

Input loses placeholder after double-click

On click placeholder disappears, on blur it reappears, but if double-click happens instead of 1 click placeholder just disappears forever, turning off double-click default doesn't help either. Is it somehow possible to treat double-click as normal click? Or is it supposed to destroy placehoder?
var input = document.getElementsByTagName("input")[0];
input.onclick = function() {
p_holder = this.placeholder;
this.placeholder = "";
}
input.onblur = function() {
this.placeholder = p_holder;
}
input.ondblclick = function(e) {
e.preventDefault();
}
<input type="text" placeholder="text goes here">

I think this might be what you are looking for.
Comments are in the source code.
var input = document.getElementsByTagName("input")[0];
// Store original placeholder
var p_holder = input.placeholder;
// Remove on focus
input.onfocus = function() {
this.placeholder = "";
}
// Restore on blur
input.onblur = function() {
this.placeholder = p_holder;
}
<input type="text" placeholder="text goes here" />
If you have any questions please leave a comment below and I well get back to you as soon as possible.
I hope this helps. Happy coding!

It is not double click, but two single clicks which are causing this issue, because on the second click, the value of p_holder will be set to ''.
To prevent that, you can check for the value first:
input.onclick = function (){
if (this.placeholder !== '') {
p_holder = this.placeholder;
this.placeholder = "";
}
}
By the way, if you just need to deal with placeholder, you actually don't need to manipulate it. The browser automatically removes it when some value is inserted into the input, and restores it when the value is removed.

In JavaScript how to have a readonly textarea and still get onselect events?

I have noticed that if I set a textarea to 'readonly'
I no longer get onselect events.
var ta = document.createElement('textarea');
ta.readonly = true;
ta.onselect = function() { ... } // This one works only if the ta.readonly is commented out.
I need the textarea to be readonly and be notified when the user selects a certain range.
Can somebody help?

There is no straightforward way to do this by dynamically adjusting the textarea's readonly attribute onfocus, onblur, onselect, etc. while still always receiving the onselect event.
If your goal is to make sure that users cannot edit/manipulate the textarea, then I would probably just leave the textarea as non-readonly (to receive the select events) but block all user input inside of it by using preventDefault() on input events, like so:
var ta = document.createElement('textarea');
// prevent user input
ta.addEventListener('cut', function(e) { e.preventDefault(); }, false);
ta.addEventListener('copy', function(e) { e.preventDefault(); }, false);
ta.addEventListener('paste', function(e) { e.preventDefault(); }, false);
ta.addEventListener('keydown', function(e) { e.preventDefault(); }, false);
// listen for user selections
ta.addEventListener('select', function() {
// function logic...
}, false);

How about just using a <div>? You can still select text in there, and it'll be non-editable, hence readonly.

You could make a loop function that keeps checking for window text selection. If it detects that the length of the select text has reached some sort of limit it will execute what ever you see fit.
Something like this:
function getSelectedText() {
var txt = '';
if (window.getSelection) {
txt = window.getSelection();
}
else if (document.getSelection) // FireFox
{
txt = document.getSelection();
}
else if (document.selection) // IE 6/7
{
txt = document.selection.createRange().text;
}
return txt;
}
function doSomething() {
var txt = getSelectedText();
// Do something with txt variable, like txt.length
}
setInterval('doSomething()',500);
You would also need to make sure the selection is from the desired textarea.
Hopefully this will point you in the right direction.

Preventing blur when user clicks on specific div not working in Firefox

I am using jquery to keep the focus on a text box when you click on a specific div. It works well in Internet Explorer but not in Firefox. Any suggestions?
var clickedDiv = false;
$('input').blur(function() { if (clickedDiv) { $('input').focus(); } });
$('div').mousedown(function() { clickedDiv = true; })
.mouseup(function() { clickedDiv = false });

Point to note: the focus() method on a jquery object does not actually focus it: it just cases the focus handler to be invoked! to actually focus the item, you should do this:
var clickedDiv = false;
$('input').blur( function() {
if(clickeddiv) {
$('input').each(function(){this[0].focus()});
}
}
$('div').mousedown(function() { clickedDiv = true; })
.mouseup(function() { clickedDiv = false });
Note that I've used the focus() method on native DOM objects, not jquery objects.
This is a direct (brute force) change to your exact code. However, if I understand what you are trying to do correctly, you are trying to focus an input box when a particular div is clicked when that input is in focus.
Here's my take on how you would do it:
var inFocus = false;
$('#myinput').focus(function() { inFocus = true; })
.blur(function() { inFocus = false; });
$('#mydiv').mousedown(function() {
if( inFocus )
setTimeout( function(){ $('#myinput')[0].focus(); }, 100 );
}
Point to note: I've given a timeout to focussing the input in question, so that the input can actually go out of focus in the mean time. Otherwise we would be giving it focus just before it is about to lose it. As for the decision of 100 ms, its really a fluke here.
Cheers,
jrh
EDIT in response to #Jim's comment
The first method probably did not work because it was the wrong approach to start with.
As for the second question, we should use .focus() on the native DOM object and not on the jQuery wrapper around it because the native .focus() method causes the object to actually grab focus, while the jquery method just calls the event handler associated with the focus event.
So while the jquery method calls the focus event handler, the native method actually grants focus, hence causing the handler to be invoked. It is just unfortunate nomenclature that the name of this method overlaps.

I resolved it by simply replace on blur event by document.onclick and check clicked element if not input or div
var $con = null; //the input object
var $inp = null; // the div object
function bodyClick(eleId){
if (eleId == null || ($inp!= null && $con != null && eleId != $inp.attr('id') &&
eleId != $con.attr('id'))){
$con.hide();
}
}
function hideCon() {
if(clickedDiv){
$con.hide();
}
}
function getEl(){
var ev = arguments[0] || window.event,
origEl = ev.target || ev.srcElement;
eleId = origEl.id;
bodyClick(eleId);
}
document.onclick = getEl;
hope u find it useful