I am trying to make a website where user can post there article. I want them allow some html tagging. But as user may not know about html, I am using some button for automatic inserting the content, so that they can add some effect to their content. For example if any user wants to write some bold text he can click on a button named "bold" and code will be automatically inserted. Following is an image of what is my design.
Everything is working fine. I am adding all those code at the end. But it is not good while editing. Let user wants to add some bold text at the middle. So he expects to click at the middle and press the bold button, but even in the case I add my code at the end.
So is there any way to detect the mouse click position and adding my text right after that ? Any suggestion(I am using jQuery)?
In your mouse click event you can use the clientX and clientY variables to find mouse click points. It can be done as follows:
$("#myButton").click(function(e) {
alert(e.clientX + ", "+ e.clientY);
})
Hope that helps
If you are not using textarea, and I assume you already put the area (example: content_node) as :
content_node.designMode="on";
content_node.contentEditable= true;
Then, you just need use [document.execCommand], such as:
document.execCommand("FontSize","false",sSize|iSize);
document.execCommand("Bold","false",null);
Further reading: https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand
Related
I have a textarea in which text pieces (stored on each data-code attribute) are appended when clicking on an specific DIV:
$(document).on('click', '.extrasPanel .contentVars div', function(e){
varCode = $('.active').attr('data-code');
varText=$(document).find('textarea').val();
$(document).find('textarea').val(varText+varCode);
checkCounter(e);
});
Once a .contenVars div is clicked, its data-code value is added to whatever is typed on textarea, and to keep typing the user must click again on the textarea.
I would like the user to keep typing after importing this pieces of text widthout needing to click back on it, so that the cursor remains on the last position, after the last imported character (as if you would have pasted it).
I have tried adding e.preventDefault; at the end of the function, with no possitive result.
If you're using jQuery, you can try .focus()
jQuery('textarea').focus();
May this link will helps you..
jquery-caret.js
This is a very simple lightweight plugin to allow you to move the caret (or cursor) position in an or element
$('textarea').caretToEnd();
I am creating a Firefox extension that gets some information about an element on a webpage (say, the element's id attribute), upon clicking said element. I also would like to implement a feature in which hovering over the element will highlight it.
There are some existing solutions that essentially already do this. It seems that these existing solutions (such the "Select element with mouse" feature in Firefox's "Inspector" tool) essentially make use of two event listeners:
A mouseover listener: Highlights whatever element you move your mouse over an element.
A mouseout listener: Removes the highlighting when you move your mouse off of an element. (Otherwise, as you move your mouse over the whole page, eventually everything will be highlighted!)
I have attempted to make my own implementation which uses those two listeners (onmouseover and onmouseout). The highlighting is applied in the same manner as the linktargetfinder in this tutorial: whenever we want an element to be highlighted, we add a link-target-finder-selected property to the element's class attribute. A link reference to the CSS file is put into the head of the HTML document and refers to this CSS code:
.link-target-finder-selected {
outline: 2px solid red !important;
}
This implementation is very close to what we want, but unfortunately, there are a few (most likely related) issues.
First, with text boxes, the highlighting only applies when the mouse is on the border of the text box. Once you move into the interior of the text box, apparently the mouseout event is triggered -- the highlighting disappears, even though it is clear to you or me that the mouse is actually still hovering over the text box. It seems that I need to somehow force the mouseout event to not trigger until you move the mouse completely outside of the text box.
Second, I am having a very similar issue with multiple-select boxes. But I also want the behavior for multiple-select boxes to be somewhat nonstandard. The actual behavior is that a mouse-over will highlight the select box; the highlight will disappear as you begin to move inside the select box, and then the options within the select box will get highlighted as you move over them. Instead, I would like my add-on to function such that, upon entering the select box, the box will be highlighted, and nothing else will be highlighted or highlighted until the mouse leaves the entire box. The solution to this should essentially be the same as the solution to the text box issue.
Please let me know if you have any ideas for how I can fix these issues.
I just gave a solution to this:
https://stackoverflow.com/a/21598914/1828637
I do the same thing in my addon which i hope to release soon.
the mouseout event should not trigger when you move into the middle of a input field, thats weird.
if that really happens then on mouseover the input field, then add a MouseLeave event, (opposite of moustEnter event)
so still to the body add the event listener for mouseoever, and when an element is mousedover then it should un-outline the previously selected element (this is for robustness) and should add a mouseLeave event that will un-outline itself.
https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mouseenter
try this code, when i tried it i didnt have to do the trick you did for textboxes:
var lastBoxedEl;
function moused(e) {
var target = e.target; //experiment, try e.currentTarget, e.originanalTarget
if (lastBoxedEl) {
lastBoxedEl.style.outline = 'none'
}
lastBoxedEl = target;
target.style.outline = '5px solid red';
}
document.body.addEventListener('mouseover', moused, false);
you are using this in html right? i dont know how this would behave in xul
I have been doing research on this simple sounding issue for a couple of days and I have not seen any result.
In a nutshell my problem is as follows: I would like to select text in a some input field, move focus to another field (or generally speaking some other element), but not lose my selected text.
Such a situation could correspond to a use-case in which I select text in a field, right-click and display a custom popup menu, but do not wish to lose focus of selected text, because I want to do some operations on the previously selected text.
A small code test sample would be (for my initial simple scenario - here I am forcing text selection when the second input field gains focus):
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" id="text1" size="20" value="Test1"/>
<input type="text" id="text2" size="20" value="Test2"/>
<script>
$('#text2').focus( function (evt) {
var target = $('#text1')[0];
target.select();
console.log('active/focused element: ' + document.activeElement.id);
});
</script>
</body>
</html>
I have been searching SO and web for a solution to this and have not seen much if any help.
I am not sure this is even really possible (due to the link between blur and selection lost and focus and selection). I have seen a style property called preventDeselect, in another SO answer - this does not work and I have not even such documentation or browser support for this.
I am quite struggling with this and would appreciate some help: even saying I can't do this at all or maybe some ways to go.
UPDATE:
Just for the record, my user scenario, which refers to text selection and context menu, is a common one (it slipped my mind to mention): just select some text in this page (or in an input type field) and right click to get the browser's default context menu - my scenario is different in that i want to use a custom menu, but with similar behavior to the browser's context menu - which normally allows to select some text, cut/copy the selection, navigate within the context menu without losing the selected text. So I think it should be possible somehow :) to do all these things with a context menu and still have your selection.
Attempting to answer this part of your question:
Such a situation could correspond to a use-case in which I select text
in a field, right-click and display a custom popup menu, but do not
wish to lose focus of selected text, because I want to do some
operations on the previously selected text.
For this use-case, I created a quick fiddle: http://jsfiddle.net/4XE9a/1/
Note: Am using the same getSelection function from #David's answer.
If you select any text and then right-click on the input, a custom popup menu appears. Click "option 1". You will find that the selection is not lost even though the focus has shifted to that anchor tag.
However, for the second part of your question regarding focus shifting to another textbox, #David's answer suffices.
Update: (after your comments)
Please see this updated fiddle: http://jsfiddle.net/783mA/1/
Now, when you select some text and right-click on the input it will show the custom popup menu with three options. Use tab to navigate and press space or click on the highlighted option. (Due to paucity of time I could not implement up/down arrow keys, but the concept remains the same)
This demonstrates your question in the comment that the selection is still not lost while navigating the menu.
Note: You are wanting to visually keep the selection highlight and not lose the selection while clicking anywhere else. Please note that this is not possible because text selection behavior is OS implemented. Browser, html etc do not play a role here. The text selection is lost as soon as you click anywhere outside the context of selection. This is because the system starts expecting a new selection as soon as you click anywhere outside. However, controls without text surface are exempt. Button, scrollbar arrows etc will not cause selection to lose.
To view this behaviour, in the fiddle, select some text and then click any dropdown on the left pane. The text selection is not lost, even visually for that matter.
This is why in the new fiddle above, I purposely used buttons to demonstrate.
You can save each selection in an interval, then retrieve it when you like. Here is an example that pulls the selection when the input has focus and clears the interval on blur:
function getSelection(elm) {
var start = elm.selectionStart;
var end = elm.selectionEnd;
return elm.value.substring(start, end);
}
$('input').focus(function() {
var self = this;
$(this).data('interval', setInterval(function() {
$(self).data('selection', getSelection(self));
},20));
}).blur(function() {
clearInterval($(this).data('interval'));
});
Now you can stuff like:
$('#text2').focus(function() {
console.log('selection in #text1 was: '+$('#text1').data('selection'));
});
Demo: http://jsfiddle.net/qCCY5/
I have a form panel with several text and text area fields and would like to copy (or move) the text from one field to another by dragging. (The fields itself should stay in place).
ExtJs provides the example, which does almost what I need: field-to-grid-dd.
The problem is that it is now not possible to enter the text into the draggable text field. I assume that's because the 'mousedown' event is intercepted by the Ext.dd.DragZone object, whose method getDragData() initiates the dragging if the mouse is clicked inside the draggable element.
It there a way to put the cursor inside the text field if the user just clicks it without dragging?
I tell you how to change the ExtJS Example file (field-to-grid-dd.js), then you can change your own app codes.
Go to line 148 and comment or remove the code below:
// i.unselectable();
Then go to line 164 and add the code below before (or after, it doesn't matter) e.stopEvent();:
t.focus(); // Add This
e.stopEvent();
Of course, you can not select the value of textfield with dragging the mouse, but it does what you want.
I've written some JavaScript code using jQuery that listens for the user to click the mouse on different parts of my page with and without holding down the shift key.
I have a table on my page. The idea is that the user can select rows in the table by clicking on them. The user can select multiple rows by clicking one row, holding down shift, and clicking another row. (This is how the user expects to select multiple rows, but holding down the shift key, right?)
Anyways, my code works in Internet Explorer, but I have a problem. My code reads the users selection, but the browser simultaneously highlights the text between the two mouse click locations.
How can I make it so that my code can select the rows based on the user clicks and the browser doesn't select the text?
Update I tried the following code:
$('tr').bind('mousedown',function() { return false; } );
With this code in my page, when I click one row, hold down shift and click another row, the text between the two rows is highlighted. This is what I'm trying to suppress. Please note that the text highlights before I release the mouse button.
Update #2 I tried the following code:
$('tr').bind('mousedown',function(e) {
e.preventDefault();
return false;
});
Unfortunately, this doesn't seem to do anything at all.
It's the mousedown event you want to suppress.
Have a look at event.stopPropogation() and event.preventDefault().
The return value of an event handler is ignored by specification (jQuery might to additional stuff).
You may be looking for preventDefault and returnValue (this latter one was invented precisely because the return value of a handler is ignored).
You may also want to look into the CSS3 property extension -moz-user-select: none.
Try this
$(function(){
$("tableSelector").bind('selectstart mousedown',function () {
return false;
});
});