While attaching a contextmenu event to a content-editable div filled with spelling mistakes, IE(11) is ignoring the callback and showing its own Spell-check menu.
jsbin: http://jsbin.com/favit/3/ (You should preview it, then edit the div, and you will see the problem)
Turning off Spell-check is not an option, because i can't tell clients to do so.
I came across this question on Google and I figured I would post an answer in case anyone else Googles this. This is how to add your own context menu on IE without disabling spellcheck. It even works when you right-click on an incorrectly-spelled word with a red underline beneath it.
Basically, there are 2 steps:
1) In the mousedown event, you need to disable spellcheck on the contenteditable element.
2) Afterwards, you re-enable spellcheck on the contenteditable element.
Below is a working example.
var editable = $('#editable');
var mouseX, mouseY;
$(document).mousemove(function(event) {
mouseX = event.pageX;
mouseY = event.pageY;
});
editable.mousedown(function(e) {
if (e.button == 2) {
editable.attr('spellcheck','false');
e.preventDefault ? e.preventDefault : e.returnValue = false;
e.stopPropagation();
return false;
}
return true;
});
editable.get(0).oncontextmenu = function(e) {
e.preventDefault ? e.preventDefault : e.returnValue = false;
return false;
};
editable.on("contextmenu", function(e) {
e.preventDefault ? e.preventDefault : e.returnValue = false;
e.stopPropagation();
if ($('#contextmenu').length == 0) {
$('<div>').attr('id', 'contextmenu').appendTo('body');
$('#contextmenu').css('z-index', 1000);
$('#contextmenu').css('position', 'absolute');
$('<ul>').appendTo('#contextmenu');
$('<li>').html('some').appendTo('#contextmenu ul');
$('<li>').html('text').appendTo('#contextmenu ul');
$('<li>').html('here').appendTo('#contextmenu ul');
}
$('#contextmenu').css('top', mouseY);
$('#contextmenu').css('left', mouseX);
$('#contextmenu li').click(function() {
$('#contextmenu').remove();
editable.attr('spellcheck','true');
});
});
#contextmenu {
border: 1px solid #000;
background-color: #fff;
padding: 5px;
}
#contextmenu ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#contextmenu li {
cursor: pointer;
padding: 2px;
}
#contextmenu li:hover {
background-color: #2daade;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editable" contenteditable="true">Click me and type some badly spelled words.</div>
Got it:
Adding the attribute "spellcheck", setting its value to "false" has fixed it.
<div contenteditable="true" spellcheck="false">
example notaword
</div>
Related
how can you disable to enter key to click a button. So when a button is focused, and the enter key pressed you wont click the button.
I made a Aim Trainer code, but there is a cheat: you can press the enter button to click instead of clicking with your mouse (or finger on mobile).
You can see what I mean here https://aimtrainer.netlify.com/clickbased.html
If you click the enter button there should happen nothing, but now you will trigger some sort of click event.
I tried this: but that wouldnt work
$('html').bind('keypress', function(e){
if(e.keyCode == 13)
{
return false;
}
});
Did you tried with e.preventDefault()?
$(document).on('keypress',function(e) {
if(e.which == 13) {
e.preventDefault()
}
});
You need preventDefault() and blur
Other good ideas: tabindex="-1" type="button"
let score = 0;
const addScore = function(val) {
score += val;
$("#score").html('score: ' + score);
}
const newRandomPosition = function() {
$("#button").css({
'left': ranNum(90) + 'vw',
'top': ranNum(90) + 'vh',
'opacity': 1
})
}
const ranNum = function(max) {
return Math.random() * max
}
$(function() {
$(document).on('keypress', function(e) {
if (e.target && e.target.id === "button" && e.which == 13) {
e.preventDefault()
}
});
$("#button")
.on("click", function(e) {
e.preventDefault();
// openFullscreen()
$(this).css("opacity", 0)
addScore(100)
newRandomPosition()
})
.on("focus", function() {
this.blur()
})
});
.button {
position: relative;
background-color: #FB6107;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button tabindex="-1" type="button" id="button" class="button button5"></button>
<h1 id="score" class="scoreText">Score: 0</h1>
Set tabindex as -1 to avoid focus using tab key
<button id="button" class="button button5" onclick="hidebtn(this)" tabindex="-1"></button>
Manually focusout the button using blur()
function newRandomPostion(){
$("#button").css({left:ranNum(90)+'vw',top:ranNum(90)+'vh'});
$("#button").css('opacity', 1);
$("#button").blur();
}
I write datagrid with lazy loading, and for some reason I need stop scrolling, when user achieve area without data, to load it. I'm would like to know how I can stop scrolling on page from my code. I have tried e.preventDefault, return false from event handler and that solution also almost working solution.
But problem is all of that solutions actually don't block scrolling, just emulate it. e.g. I want to block scrolling when user scroll up to 5000px
$(function() {
var container = $(".container");
var info = $(".info > .position");
container.scroll(function(e) {
var topPosition = container.scrollTop();
if (topPosition >= 5000) {
disableScroll();
}
info.text("scrollTop: " + topPosition);
});
$(".info > .disable").click(disableScroll);
$(".info > .enable").click(enableScroll);
});
/*
* Code from solution which was mentioned above
* https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily
*/
const keys = {
37: 1,
38: 1,
39: 1,
40: 1
};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
$(".info > .state").text("Disable");
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
$(".info > .state").text("Enable");
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
html,
body,
.page {
overflow: hidden;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.header {
box-sizing: border-box;
position: fixed;
padding: 0 15px;
display: table;
top: 0;
left: 0;
height: 50px;
width: 100%;
}
.info {
background-color: #cdcdcd;
border: 1px dashed blue;
vertical-align: middle;
display: table-cell;
text-align: center;
margin: 0 15px;
height: 50px;
}
.container {
height: calc(100% - 60px);
width: calc(100% - 30px);
margin: 60px 15px 0 15px;
box-sizing: border-box;
border: 1px solid red;
overflow: auto;
}
.content {
height: 100000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<div class="header">
<div class="info">
|<label class="position">Initial</label> |
<label class="state">Enable</label>
<button class="enable" type="button">Enable</button>
<button class="disable" type="button">Disable</button>
</div>
</div>
<div class="container">
<div class="content">
</div>
</div>
</div>
it solution almost work, except cases when user use scrollbar or wheel-click scrolling. e.g. not working use case I want scroll will be stopped when achieve limit (in the example 5000px) and allow scrolling after some event. Is it possible?
UPDATE
Actually question is how to stop scrolling during scrolling example. Scrolling was disabled when user achieve 5000px, but current scrolling process didn't stopped. And I would like to know is is possible to stop scrolling in progress i.e. in other words how to stop scrolling in the example when position become greater than 5000px (change color in header to red)
Add a class
.stop-scrolling{
overflow : hidden;
}
when you need to stop scroll over page
$('html').addClass('stop-scrolling');
and when you want to enable it again:
$('html').removeClass('stop-scrolling');
OR do the same thing like below without adding any class:
$('html').css('overflow','hidden');
$('html').css('overflow','auto');
Okay i see. Then to disable the scrollbar you should try ,
$("body").css("overflow", "hidden");
Then to cancel mousewheel scrolling you should try,
document.addEventListener("mousewheel", function(evt){
evt.preventDefault();
return false;
}, false);
I would like to keep a div visible while the mouse is in the bounds of the div, the code works until it hovers over the input. I would like a sign up form appear onmouseover and when the sign in is complete and the mouse moves off the div is no longer visible. jsFiddle Demo
HTML
<div class="members">
Members
<div id="sign-up-form" class="sign-up-form">
<input type="text" name="firstName">
</div>
</div>
JS
var signUp = document.getElementById('signUp');
var signUpForm = document.getElementById('sign-up-form');
signUp.onmouseover = function(){
signUpForm.style.display = 'block';
}
signUpForm.onmouseout = function(){
signUpForm.style.display = 'none';
}
CSS
#signUp{
position: relative;
background-color: red;
color: white;
padding: 6px;
}
#sign-up-form{
display: none;
position:absolute;
top: 32px;
left: 8px;
background-color: rgba(0,83,159,0.6);
padding: 15px;
}
I would do it this only with CSS:
#sign-up-form {
display: none;
}
.members:hover #sign-up-form {
display: block;
}
This example uses mouseover and mouseout event listeners and a function that will listen to all children elements before changing the display of the signUpForm element.
function outVis(event) {
var e = event.toElement || event.relatedTarget;
if (e.parentNode == this || e == this) {
return;
}
signUpForm.style.display = 'none';
}
http://jsfiddle.net/9xhb532v/1/
I have created a small chat system for a project I am making. The chat is functioning well. However, I cannot figure out how to make it so the div stays at the bottom of the chat, rather than having to scroll down to read the last thing someone said.
I am referring to another similar question posted on here for guidance. How to keep a div scrolled to the bottom as HTML content is appended to it via jquery, but hide the scroll bar?
But it still will not work for me. The chat is then stored in a chat.txt file. Each line is surrounded in tags. The following is the code I am using.
js in header:
$container = $('#chat-area');
$container[0].scrollTop = $container[0].scrollHeight;
$('#sendie').keypress(function (e) {
if (e.which == 13) {
$container = $('#chat-area');
$container.append('<p>' + e.target.value + '</p>');
$container.animate({ scrollTop: $container[0].scrollHeight }, "slow");
}
});
chat.php:
<script type="text/javascript">
// strip tags
name = name.replace(/(<([^>]+)>)/ig,"");
// display name on page
$("#name-area").html("You are: <span>" + name + "</span>");
// kick off chat
var chat = new Chat();
$(function() {
chat.getState();
// watch textarea for key presses
$("#sendie").keydown(function(event) {
var key = event.which;
//all keys including return.
if (key >= 33) {
var maxLength = $(this).attr("maxlength");
var length = this.value.length;
// don't allow new content if length is maxed out
if (length >= maxLength) {
event.preventDefault();
}
}
});
// watch textarea for release of key press
$('#sendie').keyup(function(e) {
if (e.keyCode == 13) {
var text = $(this).val();
var maxLength = $(this).attr("maxlength");
var length = text.length;
// send
if (length <= maxLength + 1) {
chat.send(text, name);
$(this).val("");
} else {
$(this).val(text.substring(0, maxLength));
}
}
});
});
</script>
<p id="name-area"></p>
<div id="chatWrap"><div id="chat-area"></div></div>
<form id="send-message-area">
<p>Your message: </p>
<textarea id="sendie" maxlength = '100' ></textarea>
</form>
</div>
css:
#pageWrap
{
position: fixed;
display: block;
right: 0;
bottom: 0;
background: #8B1918;
box-shadow: 0px 0px 12px #333;
transition: height .5s;
}
#pageWrap p
{
color: white;
font-family: arial;
margin-left: 5px;
margin-bottom: 4px;
}
#chatWrap
{
width: 200px;
height: 200px;
overflow: scroll;
overflow-x:hidden;
box-shadow: 1px 1px 10px #333 inset;
color: white;
font-family: arial;
font-size: 14px;
}
#chat-area
{
padding-left: 11px;
}
#sendie
{
resize: none;
display: block;
width: 92%;
margin-left: auto;
margin-right: auto;
margin-bottom: 6px;
}
I got it (partially) working for you. Here are the issues I discovered:
Try not to name variables starting with $ - it creates unnecessary confusion.
You didn't declare $container as var, so you're using a variable before declaring it.
jQuery supports 99% of everything you can do with plain Javascript, but makes it better. Wherever possible, I changed your code to use jQuery instead.
I'm not sure about e.target.value, but $('#sendie').val() works just as well.
You definitely needed to wrap this in the body onload function.
You want to add e.preventDefault(); in the event handler so that it doesn't put a return character in the box.
You didn't clear the input textarea (with jQuery it's just $('#sendie').val('');).
The font color of the chat message area was white (at least on JSFiddle it was). Messages were invisible due to this.
Here's a fiddle demonstrating everything working (as far as I know) - http://jsfiddle.net/U9XAv/
And here's the updated Javascript:
$(function()
{
var container = $('#chat-area');
container.css('scrollTop', container.css('scrollHeight'));
$('#sendie').keydown(function (e)
{
if (e.which == 13)
{
container.append('<p>' + $(this).val() + '</p>')
.animate({ scrollTop: container[0].scrollHeight) }, "slow");
$(this).val('');
e.preventDefault();
}
});
});
And the CSS I changed:
#chat-area
{
padding-left: 11px;
color: black;
}
In my project, I am adding li tags dynamically to ul elements and then when the focus is on textarea element, I am trying to generate a hover effect on the first li element whenever the user presses down arrow key. Somehow my effort is not working.
The code which I tried till now is as follows:
JS Fiddle
HTML
<textarea id="result" rows="4" cols="50"></textarea>
<ul class="autoComplete"></ul>
CSS
.autoComplete li {
background-color:#E1E1E1;
cursor: hand;
cursor: pointer;
}
.autoComplete li:hover {
background-color:#BDBDBD;
}
js
var result = $('#result');
var autoComplete = $('.autoComplete');
result.keydown(function (event) {
if (event.keyCode == 40) {
if (autoComplete.children('li').length > 0) {
console.log('down');
//should work with IE
autoComplete.children(":first").focus().hover();
}
}
});
PS: The solution should be crossbrowser (IE8+)
Try
CSS
.autoComplete li {
background-color:#E1E1E1;
cursor: hand;
cursor: pointer;
}
.autoComplete li.hover {
background-color:#BDBDBD;
}
JS
var result = $('#result');
var autoComplete = $('.autoComplete');
result.keyup(function (event) {
console.log('keydown');
if (event.keyCode == 40) {
if (autoComplete.children('li').length > 0) {
console.log('down');
//should work with IE
autoComplete.children(":first").mouseenter();
}
}
});
autoComplete.on('mouseenter', 'li', function(){
$(this).addClass('hover');
}).on('mouseleave', 'li', function(){
$(this).removeClass('hover');
});
Demo: Fiddle