I've tried this
HTML
<div>
<h1>Some text here</h1>
<p>Text area text here</p>
</div>
jQuery
$(function(){
$('p').on('click', function(e){
e.preventDefault();
var txt = $(this).text();
$(this).parent().append('<textarea>' + txt + '</textarea>');
$(this).remove();
});
});
I need to update the text of a paragraph by inline editing. I need to back the paragraph with the new text typed there and remove the textarea when someone click outside of the textarea.
Thanks
Here is an update to your fiddle http://jsfiddle.net/99pxz8et/2/
what you need is to listen on change event for the new text area and then update it
$area.one('focusout', function() {
$p.show();
$p.text($area.val());
$area.remove()
});
Edit: changed .on() to .one()
Related
I have done
some html tags click event it's working by mouse click and
keyboard enter
some html tags click events are are not working when
press in keyboard enter. only working mouse click.
I need both are we excutue in single method
like: Button, Anchor
"Button **and Anchor**" - tags only suporting .
"p,div,span,h1"- tags are not suporting .
Button and Anchor Tag only working both mouse click and keyboard enter
!
remaining element are not working tab using keyboard enter why ?
dont't say keycode method for keyboard enter i need similar button and anchor tag
Here is the demo:
$(document).ready(function(){
$("p").click(function(){
alert("The paragraph was p.");
});
$("div").click(function(){
alert("The paragraph was div.");
});
$("span").click(function(){
alert("The paragraph was span.");
});
$("h1").click(function(){
alert("The paragraph was h1.");
});
$("button").click(function(){
alert("The paragraph was button.");
});
$("a").click(function(){
alert("The paragraph was a.");
});
});
* {
margin-bottom:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Button and Anchor Tag only working both mouse click and keyboard enter ! </h2>
<h2>remaining element are not working tab using keyboard enter ? </h2>
<br>
<br>
<p tabindex="0">Click on this paragraph.</p>
<div tabindex="0">Click on this div.</div>
<span tabindex="0">Click on this span.</span>
<h1 tabindex="0">Click on this h1.</h1>
<button> Click on this button.</button> <br>
Click on this anchor
Thanks
J.Jayaprakash
You could use the keypress event.
To determine which character was entered, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the character code.
function alertTag( tag ){
alert("The element was " + $(tag).prop("tagName"));
}
$(document).ready(function() {
$("p, div, span, h1, button, a").click(function(e) {
alertTag(e.target);
}).keypress(function(e) {
if (e.which == 13) {
e.preventDefault(); // optionally
alertTag(e.target);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p tabindex="0">Click on this paragraph.</p>
<div tabindex="0">Click on this div.</div>
<span tabindex="0">Click on this span.</span>
<h1 tabindex="0">Click on this h1.</h1>
<button> Click on this button.</button> <br>
Click on this anchor
If you want to use the same method for all the elements (while I don't see the point in doing so) you need to include e.preventDefault(). Otherwise, when pressing enter you will trigger both the click and the keypress events.
An alternative could be to force the p, div, span and h1 elements to trigger a click event when pressing enter on them:
$(document).ready(function() {
$("p, div, span, h1, button, a").click(function(e) {
alert("The element was " + $(e.target).prop("tagName"));
});
$("p, div, span, h1").keypress(function(e) {
if (e.which == 13) {
$(e.target).trigger('click');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p tabindex="0">Click on this paragraph.</p>
<div tabindex="0">Click on this div.</div>
<span tabindex="0">Click on this span.</span>
<h1 tabindex="0">Click on this h1.</h1>
<button> Click on this button.</button> <br>
Click on this anchor
If you really want to do it for all the HTML tags (even when I think that's not a good idea) you can do the following.
$("body *").keypress(function(e) {
if (e.which == 13) {
$(e.target).trigger('click');
}
});
Then, all the elements will react to a enter like they do to a click. But you should really try to replace body * for a selector that covers just the elements that you want. For example, you can add the class .enterTriggersClick to the target elements and then do:
$(".enterTriggersClick").keypress(function(e) { ...
I have the following issue with Twitter Bootstrap and jQuery:
I have a title, in h1, and a subtitle, in small. I want to change the text of both, using jQuery. My code is the following:
HTML:
<h1 id='h1id'>
Hello World
<br>
<small id='smallid'>Here I am!</small>
</h1>
JavaScript:
$(document).ready( function() {
$('#h1id').text('I can change this');
$('#smallid').text('But not this');
});
The h1 is changed, but the small-element disappears. How can I fix this?
Live example here
Wrap hello world in a span
HTML
<h1 id='h1id'>
<span>Hello World</span>
<br>
<small>Here I am!</small>
</h1>
JavaScript
$(document).ready( function() {
$('#h1id span').text('I can change this');
$('#h1id small').text('But not this');
});
Add another div or span like this :
<h1 id='h1id'>
<div id="something">
Hello World
</div>
<br>
<small id='smallid'>Here I am!</small>
</h1>
$(document).ready( function() {
$('#h1id #something').text('I can change this');
$('#h1id #smallid').text('But not this');
});
The .text() function replaces all content in the H1 tag therefore removing the span tag from the DOM.
You can append the span with jquery like the following fiddle shows:
http://jsfiddle.net/nkzbzm7f/1/
html
<h1 id='h1id'>
Hello World
</h1>
javascript
$(document).ready( function() {
$('#h1id').text('I can change this')
.append("<br>")
.append("<small>Here I am!</small>");
});
If you change the H1 the small text disappears because it's part of the H1. Adding extra divs or spans isn't nice. keep your html slim!
change h1 text only:
$('#h1id').html('new text<br><small>' + $('#h1id small').html() + '</small>' );
change small text only:
$('#h1id small').text('new text');
change both:
$('#h1id').html('new test<br><small>new also</small>');
Instead you should cache it in a var before replacing the text:
$(document).ready( function() {
var smallid = $('#smallid'); // cache it here.
$('#h1id').text('I can change this. ');
smallid.text('changed').appendTo('#h1id'); // now change and append it again.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id='h1id'>
Hello World
<br>
<small id='smallid'>Here I am!</small>
</h1>
I'm using the following code to adds a class to the p tags to .content contenteditable div (based on the position of the caret):
var $content = $('.content'),
$p = $content.find('p');
$content.on('keyup click', function(e) {
var focusElement = window.getSelection().baseNode.parentElement;
$p.removeClass('hover');
$(focusElement).addClass('hover');
});
It works fine with structures like this:
<p>Text text</p>
<p class="hover">Text text</p>
the problem arises with structures like this:
<p>Text text</p>
<p>Text <i>text</i></p>
Any html tag inside p seems to disrupt the code, preventing it from adding the hover class to the p tag.
Is there any workaround for this?
$content.on('keyup click', function(e) {
$(window.getSelection().baseNode).closest('p').addClass('hover');
$p.removeClass('hover');
});
How can i split some text in div using html comment.
Lats say i haw:
<div id="id1">Some first text <!--more--> here.</div>
<a id=id1>Show/Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a id=id1>Show/Hide</a>
I wont a jquery or javascript to show or hide text after<!--more-->.
Thanks
You can try something like this:
Given markup:
<div id="id1">Some first text <!--more--> here.</div>
<a>Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a>Hide</a>
Add the following javascript:
//1. On page load, wrap text to be hidden in <span>
$(function() {
$("div").each(function() {
var html = $(this).html();
$(this).html(html.replace('<!--more-->', '<span class="hiddenText">', html) + '</span>');
});
// 2. Toggle visibility of span tags when clicking link
$('a').click(function() {
if ($(this).html() == 'Hide') {
$(this).prev('div').children('.hiddenText').hide();
$(this).html('Show');
} else {
$(this).prev('div').children('.hiddenText').show();
$(this).html('Hide');
}
});
});
Check my jsFiddle for a working example.
UPDATE: Updated solution to not rely on separate CSS class to hide/show text.
I have a HTML document which llokes like this:
<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>
<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>
<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>
I want text No text in the div above is selected to be changed to Some text in the div above is selected when, guess what, some of the text in the div above is selected :)
jQuery has a .select() event, that would make this rather easy to do, but seems, that it works when selected text is inside input or textarea.
Here is a code that I've tried:
$(document).ready(function()
{
//Some text inside div is selected
$('DIV.this_can_be_selected').select
(
function()
{
alert('Something is selected!');
$(this).next().html('Some text in the div above is selected');
}
);
}
);
Nothing is happening.
Is there a way to solve this problem?
jQuery core doesn't have anything for this, but there are some plugin options.
Your code would look like this:
$(function() {
$(document).bind('textselect', function(e) {
alert('Selected Text: ' + e.text);
});
});
You can test it out here.