My example:
$(document).on('keyup', '[contenteditable=true]', function (e) {
let _this = $(this), text = _this.text();
if (text.length === 1) {
let span = $('<span>').text(text);
_this.html(span);
}
console.log(_this.html());
});
[contenteditable=true] {
border: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div contenteditable="true"></div>
My problem: If I type some text (more than 1 character) with normal speed into the div, code works fine. But, when I try to type text with fast speed, no <span> tag was appended to the div.
How can I fix that?
You could use input event instead it's more efficient when you trach user inputs, check example below :
$(document).on('input', '[contenteditable=true]', function (e) {
//Your logic
});
Or also keypress as T.J. Crowder comment's says :
$(document).on('keypress', '[contenteditable=true]', function (e) {
//Your logic
});
Hope this helps.
$(document).on('input', '[contenteditable=true]', function (e) {
let _this = $(this), text = _this.text();
if (text.length === 1) {
let span = $('<span>').text(text);
_this.html(span);
}
console.log(_this.html());
});
[contenteditable=true] {
border: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div contenteditable="true"></div>
Related
I have this code:
http://jsfiddle.net/4Qsa8/111/
This input is increasing size when you type a letter as you can see. But here is the issue, when I delete first letter from the end, the input does not decrease, it starts to decrease when I delete the second letter from the end. So the question is how to make input decrease in size on the deleting of the last letter, not on the second, before thanks.
-HTML
<div class="resizing-input">
* <input type="text" placeholder="placeholder"/>
<span style="display:none"></span>
</div>
-CSS
.resizing-input input, .resizing-input span {
font-size: 20px;
font-family: Sans-serif;
white-space: pre;
padding: 1px;
}
-JS
$(document).ready(function () {
var $inputs = $('.resizing-input');
// Resize based on text if text.length > 0
// Otherwise resize based on the placeholder
function resizeForText(text) {
var $this = $(this);
if (!text.trim()) {
text = $this.attr('placeholder').trim();
}
var $span = $this.parent().find('span');
$span.text(text);
var $inputSize = $span.width();
$this.css("width", $inputSize);
}
$inputs.find('input').keypress(function (e) {
if (e.which && e.charCode) {
var c = String.fromCharCode(e.keyCode | e.charCode);
var $this = $(this);
resizeForText.call($this, $this.val() + c);
}
});
// Backspace event only fires for keyup
$inputs.find('input').keydown(function (e) {
if (e.keyCode === 8 || e.keyCode === 46) {
resizeForText.call($(this), $(this).val());
}
});
$inputs.find('input').each(function () {
var $this = $(this);
resizeForText.call($this, $this.val())
});
});
Use keyup event instead of keydown event. because keydown event occurs before the input update its value. It will work.
Line 26 of the jsfiddle example, change the line:
$inputs.find('input').keydown(function (e) {
to:
$inputs.find('input').keyup(function (e) {
I know there are lots of ways to detect the click outside of an element. Mostly all of them use event.stopPropagation. Since event.stopPropagation will break other stuff, I was wondering if there is another way to achieve the same effect. I created a simple test for this:
HTML:
<div class="click">Click me</div>
Javascript:
$(function() {
var $click = $('.click'),
$html = $('html');
$click.on( 'click', function( e ) {
$click.addClass('is-clicked').text('Click outside');
// Wait for click outside
$html.on( 'click', clickOutside );
// Is there any other way except using .stopPropagation / return false
event.stopPropagation();
});
function clickOutside( e ) {
if ( $click.has( e.target ).length === 0 ) {
$click.removeClass('is-clicked').text('Click me');
// Remove event listener
$html.off( 'click', clickOutside );
}
}
});
http://jsfiddle.net/8p4jhvqn/
This works, but only because i stop the bubbling with event.stopPropagation();. How can i get rid of event.stopPropagation(); in this case?
It can be done in a simpler way, can't it be? Why complicate things when something as simple as below could work.
$(document).click(function(e){
var elm = $('.click');
if(elm[0] == e.target){
elm.addClass("is-clicked").text("click outside");
} else { elm.removeClass("is-clicked").text("click inside"); }
});
DEMO
You could do something like this to achieve the same effect
$(document).on("click", function(e){
var target = $(e.target);
if(target.hasClass("click")){
$click.addClass('is-clicked').text('Click outside');
}else{
$click.removeClass('is-clicked').text('Click me');
}
});
HTML code:
<div id="box" style="width:100px; height:100px; border:1px solid #000000; background-color:#00ff00;"></div>
JavaScript code:
function Init()
{
$(document).click(function(event){
if(event.target.id == "box")
{
$(event.target).css("backgroundColor", "#ff0000");
}
else
{
$("#box").css("backgroundColor", "#00ff00");
}
})
}
$(document).ready(Init);
If the element in question has child elements, then those may show up as e.target, and you can't simply compare it to your element.
In that case, capture the event in both the event and in the document, and detect events which only occurred on the document, for example by recording and comparing e.target:
var lastTarget = undefined;
$("#interesting-div").click(function(e) {
// remember target
lastTarget = e.target;
});
$(document).click(function(e) {
if (e.target != lastTarget) {
// if target is different, then this event didn't come from our
// interesting div.
// do something interesting here:
console.log("We got a click outside");
}
});
var lastTarget = undefined;
$("#interesting-div").click(function(e) {
// remember target
lastTarget = e.target;
});
$(document).click(function(e) {
if (e.target != lastTarget) {
// if target is different, then this event didn't come from our
// interesting div.
// do something interesting here:
console.log("We got a click outside");
}
});
#interesting-div {
background: #ff0;
border: 1px solid black;
padding: .5em;
}
#annoying-childelement {
background: #fa0;
border: 1px solid black;
margin: 1em;
padding: .5em;
width: 20em;
}
#large-div {
background: #ccc;
padding: 2em 2em 20em 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="large-div">
<div id="interesting-div">
This is our interesting element
<div id="annoying-childelement">
child element
</div>
</div>
</div>
</div>
Couldn't find a solution that actually worked, but I want that on a click, a div shows.
Now this works when I load the page, but then after that first click, I have to click twice every time for the div to show.
Any ideas?
$(document).ready(function () {
setMenu();
});
function setMenu()
{
var headerExtIsOpen = false;
$('#headerExt').hide();
$('#header').click(function () {
if (!headerExtIsOpen) {
$('#headerExt').show();
headerExtIsOpen = true;
} else {
$('#headerExt').hide();
headerExtIsOpen = false;
}
});
}
There is no need to remember the state, just use toggle()
$(function () {
setMenu();
});
function setMenu()
{
$('#headerExt').hide();
$('#header').on("click", function (e) {
e.preventDefault();
$('#headerExt').toggle();
});
}
You said you want to toggle other things.
Best thing would be to toggle a class to change the color
$('#header').on("click", function (e) {
e.preventDefault();
$(this).toggleClass("open");
$('#headerExt').toggle();
});
another way is to check the state
$('#header').on("click", function (e) {
e.preventDefault();
var child = $('#headerExt').toggle();
var isOpen = child.is(":visibile");
$(this).css("background-color" : isOpen ? "red" : "blue" );
});
if the layout is something like
<div class="portlet">
<h2>Header</h2>
<div>
<p>Content</p>
</div>
</div>
You can have CSS like this
.portlet h2 { background-color: yellow; }
.portlet > div { display: none; }
.portlet.open h2 { background-color: green; }
.portlet.open > div { display: block; }
And the JavaScript
$(".portlet h2 a").on("click", function() {
$(this).closest(".portlet").toggleClass("open");
});
And there is layouts where it would be possible to have zero JavaScript involved.
Turns out I had some script hidden in my .js file that closes the menu again when the user clicks elsewhere, that I forgot about.
function resetMenu(e) {
var container = $('#headerExt');
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$('#header').css("background-color", "inherit");
container.hide();
headerExtIsOpen = false;
}
}
I forgot to set the headerExtIsOpen back to false again after closing it in this function (code above shows the fix). Now it works fine :)
I have a form validation using jquery /regex:
$(document).ready(function () {
$('.keyup-numeric').keyup(function () {
$('span.error-keyup-1').hide();
var inputVal = $(this).val();
var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
if (!numericReg.test(inputVal)) {
$(this).after('<span class="tiny warning_bubble">Numeric characters only.</span>');
}
});
});
How can I stop the warning_bubble span from piling up?
Fiddle: http://jsfiddle.net/M2Ns5/
THanks,
You could have the warning created with the rest of the html, and set its style to be initially hidden and then just show, or hide the warning when needed
HTML
<label>Phone Number:
<input type="tel" class="keyup-numeric" placeholder="(XXX) XXX-XXXX"/>
<span class="tiny warning_bubble">Numeric characters only.</span>
</label>
CSS
.warning_bubble {
color:#d2232a;
-webkit-border-radius: 12px;
border-radius: 12px;
background-color:#ffdd97;
padding:5px;
width:100%;
display:none;
}
JS
$(document).ready(function () {
$('.keyup-numeric').keyup(function () {
$('span.error-keyup-1').hide();
var inputVal = $(this).val();
var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
if (!numericReg.test(inputVal)) {
$(this).parent().find(".warning_bubble").show();
} else {
$(this).parent().find(".warning_bubble").hide();
}
});
});
JSFiddle Demo
Check if the next element has the warning_bubble class & then add it the span.
$(document).ready(function () {
$('.keyup-numeric').keyup(function () {
$('span.error-keyup-1').hide();
var inputVal = $(this).val();
var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
if (!numericReg.test(inputVal)) {
if (!$(this).next().hasClass('warning_bubble')) {
$(this).after('<span class="tiny warning_bubble">Numeric characters only.</span>');
}
} else {
$(this).parent().find(".warning_bubble").hide();
}
});
});
jsFiddleDemo here
The fewest changes to your code would be to add a container inside the label, after the input:
<span class="warning-container"></span>
And change your after line to a empty/append:
$(this).siblings('.warning-container').empty().append('<span class="tiny warning_bubble">Numeric characters only.</span>');
Note: empty().append() is a faster way of doing html(). Also be aware that while this is the fewest changes to your original code, there are many ways to make it more efficient and more robust.
http://jsfiddle.net/MrPolywhirl/PkPU9/
$(document).ready(function () {
(function(tel) {
// Validation expression
var numericReg = /^\d*\d(|.\d*\d|,\d*\d)?$/;
// Create bubble
var bubble = $('<span class="tiny warning_bubble" style="display:none">Numeric characters only.</span>');
$(tel).after(bubble); // Add and hide bubble to the input
// Add key listener to the text input
$(tel).keyup(function () {
var inputVal = $(this).val();
// Toggle the bubble using jquery show/hide
bubble[inputVal && !numericReg.test(inputVal) ? 'show' : 'hide']();
});
})('.keyup-numeric');
});
I am trying to make a select-unselect image by change border color on click by this code
var $box=null;
$('img')
.click(function() {
if ($box == null) {
$box = $(this);
$box.css("border","5px solid green");
} else {
$box.css("border","5px solid white");
$box = null;
}
}
);
The code is working fine except when I try to select-unselect and select same image. I want to select the other image by one click.
I tried to check if ($box == $(this)) but it does not work.
Use a class instead, and toggle the class when needed. This solution acts like a radio button (only one image with a border at a time), but allows you to deselect the active image as well:
http://jsfiddle.net/6cGVz/
$('img').click(function() {
var $this = $(this);
if ($this.hasClass('active')) {
$this.removeClass('active');
} else {
$('.active').removeClass('active');
$this.addClass('active');
}
});
Explanation
Check if $box is the clicked element or not. If it is, just hide its border if it has one. Otherwise, put the border on the clicked element!
Solution (Live Demo)
JavaScript/JQuery
var $box=null;
$('img')
.click(function() {
if ($box == null) {
$box = $(this);
$box.css("border","5px solid green");
} else {
$box.css("border","5px solid white");
if($box != $(this))
{
$box = $(this);
$box.css("border","5px solid green");
}
else
$box = null;
}
}
);
For the purposes of your question, I will put all of the images in a container:
<div id='setOfImages'>
<img ... >
<img ... >
<img ... >
<img ... >
</div>
Toggle a class.
$('#setOfImages > img').click(function() {
'use strict';
if($(this).hasClass('selected')) {
// Deselect currently selected image
$(this).removeClass('selected');
} else {
// Deselect others and select this one
$('#setOfImages > img').removeClass('selected');
$(this).addClass('selected');
}
});
And in your CSS:
#setOfImages > img {
border: 5px solid #fff;
}
#setOfImages > img.selected {
border: 5px solid green;
}
See jsFiddle demo.
Update - only one image can be selected
toggleClass of jQuery method make it so easy -
Using Js -
$('img').click(function() {
if ($(this).hasClass("selected")) {
$("img.selected").removeClass("selected");
} else {
$("img.selected").removeClass("selected");
$(this).addClass("selected");
}
});
with css -
.selected{
border:5px solid green;
}
Demo
You can add a data attribute to the image itself, instead of relying on something external.
$('img')
.click(function() {
var img = $(this);
if (! img.data('box')) {
img.css("border","5px solid green");
img.data('box', true);
} else {
img.css("border","5px solid white");
img.data('box', false);
}
}
);
A working example: http://codepen.io/paulroub/pen/qbztj