Whilst in a html textarea input, I want the tab keyboard button to act like a Word processor-style indentation key rather than skipping to the next element.
How can this be done?
google is your friend! link
function insertTab(o, e)
{
var kC = e.keyCode ? e.keyCode : e.charCode ? e.charCode : e.which;
if (kC == 9 && !e.shiftKey && !e.ctrlKey && !e.altKey)
{
var oS = o.scrollTop;
if (o.setSelectionRange)
{
var sS = o.selectionStart;
var sE = o.selectionEnd;
o.value = o.value.substring(0, sS) + "\t" + o.value.substr(sE);
o.setSelectionRange(sS + 1, sS + 1);
o.focus();
}
else if (o.createTextRange)
{
document.selection.createRange().text = "\t";
e.returnValue = false;
}
o.scrollTop = oS;
if (e.preventDefault)
{
e.preventDefault();
}
return false;
}
return true;
}
<textarea onkeydown="insertTab(this, event);"></textarea>
Related
I want to restrict decimal places up to 1. User shouldnt type multiple dots(1..99) and (1.99). I want 1.9 2.6 for ex. Not 2.66 then convert into 2.7 etc. I have to use pe:sheetcolumn. I tried to add p:inputnumber and other p: components than pe extension. But pe:sheetcolumn have to be. With below approach it just let user to type multiple dots and multiple decimal places. It just convert to 1 decimal after user entered value on screen with #0.0. But i want to restrict on input to type multiple decimal places than 1 and multiple dots. I thought about javascript keyup event but i think it would be bad approach. How can i achive that
<pe:sheetcolumn headerText="SOME" value="#{SOME.some}" colWidth="200"
colType="numeric" numericPattern="#0.0" >
</pe:sheetcolumn>
For example for p:inputNumber as you can see on image user cant type multiple dots and they cant add decimal places more than 6.
Example
I want to do same thing with pe:sheetColumn. How can i do that
My JSF VERSION : 2.2.1 PRİMEFACES AND PRIMEFACES EXTENSION VERSION : 6.2
If you install this MonkeyPatch you can then tweak the output to do whatever your want. I am pretty sure you can get the current cell with var currentValue = this.getDataAtCell(row , col) If you add this JS to your app you can then tweak how it handles keypresses and validation.
I added this line for you
var currentValue = this.getDataAtCell(row , col); // VALUE HERE!
So you can validate whatever your want with your code and if there is already a "." don't accept another "." etc.
if (PrimeFaces.widget.ExtSheet) {
PrimeFaces.widget.ExtSheet.prototype.handleHotBeforeKeyDown = function(e) {
var selectedLast = this.getSelectedLast();
if (!selectedLast) {
return;
}
var row = selectedLast[0];
var col = selectedLast[1];
var celltype = this.getCellMeta(row, col).type;
var currentValue = this.getDataAtCell(row , col); // VALUE HERE!
var evt = e || window.event; // IE support
var key = evt.charCode || evt.keyCode || 0;
var shiftDown = e.shiftKey;
// #740 tab on last cell should focus this next component
if (this.allowTabOffSheet && key == 9) {
var lastRow = this.countRows() - 1;
var lastCol = this.countCols() - 1;
if ((!shiftDown && row === lastRow && col === lastCol) ||
(shiftDown && row === 0 && col === 0)) {
e.stopImmediatePropagation();
this.unlisten();
this.deselectCell();
//add all elements we want to include in our selection
var focusableElements = 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]):not([hidden]):not([aria-hidden="true"]), [tabindex]:not([disabled]):not([tabindex="-1"]):not([aria-hidden="true"])';
if (document.activeElement && document.activeElement.form) {
var focusable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focusableElements),
function(element) {
//check for visibility while always include the current activeElement
return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement
});
var index = focusable.indexOf(document.activeElement);
if (index > -1) {
var nextElement = focusable[index + 1] || focusable[0];
nextElement.focus();
}
}
}
return;
}
// prevent Alpha chars in numeric sheet cells
if (celltype === "numeric") {
// #766 do not block if just CTRL or SHIFT key
if (key === 16 || key === 17) {
return;
}
// #739 allow navigation
var ctrlDown = evt.ctrlKey || evt.metaKey; // Mac support
if (shiftDown || ctrlDown) {
// navigation keys
if (key == 9 || (key >= 35 && key <= 40)) {
return;
}
}
// check for cut and paste
var isClipboard = false;
// Check for Alt+Gr (http://en.wikipedia.org/wiki/AltGr_key)
if (ctrlDown && evt.altKey) isClipboard = false;
// Check for ctrl+c, v and x
else if (ctrlDown && key == 65) isClipboard = true; // a (select all)
else if (ctrlDown && key == 67) isClipboard = true; // c
else if (ctrlDown && key == 86) isClipboard = true; // v
else if (ctrlDown && key == 88) isClipboard = true; // x
// allow backspace, tab, delete, enter, arrows, numbers and keypad numbers
// ONLY home, end, F5, F12, minus (-), period (.)
// console.log('Key: ' + key + ' Shift: ' + e.shiftKey + ' Clipboard: ' + isClipboard);
var isNumeric = ((key == 8) || (key == 9) || (key == 13) ||
(key == 46) || (key == 110) || (key == 116) ||
(key == 123) || (key == 188) || (key == 189) ||
(key == 190) || ((key >= 35) && (key <= 40)) ||
((key >= 48) && (key <= 57)) || ((key >= 96) && (key <= 105)));
if ((!isNumeric && !isClipboard) || shiftDown) {
// prevent alpha characters
e.stopImmediatePropagation();
e.preventDefault();
}
}
}
}
Can anyone having solution for hide CTRL+U and right click in Firefox also?
I have finally find solution for the above query. Try the below code in Firefox also it's working..
<script type='text/javascript'>
var isCtrl = false;
document.onkeyup=function(e)
{
if(e.which == 17)
isCtrl=false;
}
document.onkeydown=function(e)
{
if(e.which == 17)
isCtrl=true;
if((e.which == 85) || (e.which == 80) || (e.which == 123) || (e.which == 67) && (isCtrl == true))
{
return false;
}
}
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
</script>
<body oncontextmenu="return false;">
After Chrome 58 update few features like Bold, Italic & Underline stopped working. On debugging i found that execCommand('strikethrough') is not striking the selected text.
formatMultiple: function(tag)
{
this.inline.formatConvert(tag);
this.selection.save();
document.execCommand('strikethrough'); //HERE, IT IS NOT STRIKING THE TEXT
this.$editor.find('strike').each($.proxy(function(i,s)
{
var $el = $(s);
this.inline.formatRemoveSameChildren($el, tag);
var $span;
if (this.inline.type)
{
$span = $('<span>').attr('data-redactor-tag', tag).attr('data-verified', 'redactor');
$span = this.inline.setFormat($span);
}
else
{
$span = $('<' + tag + '>').attr('data-redactor-tag', tag).attr('data-verified', 'redactor');
}
$el.replaceWith($span.html($el.contents()));
if (tag == 'span')
{
var $parent = $span.parent();
if ($parent && $parent[0].tagName == 'SPAN' && this.inline.type == 'style')
{
var arr = this.inline.value.split(';');
for (var z = 0; z < arr.length; z++)
{
if (arr[z] === '') return;
var style = arr[z].split(':');
$parent.css(style[0], '');
if (this.utils.removeEmptyAttr($parent, 'style'))
{
$parent.replaceWith($parent.contents());
}
}
}
}
}, this));
// clear text decoration
if (tag != 'span')
{
this.$editor.find(this.opts.inlineTags.join(', ')).each($.proxy(function(i,s)
{
var $el = $(s);
var property = $el.css('text-decoration');
if (property == 'line-through')
{
$el.css('text-decoration', '');
this.utils.removeEmptyAttr($el, 'style');
}
}, this));
}
if (tag != 'del')
{
var _this = this;
this.$editor.find('inline').each(function(i,s)
{
_this.utils.replaceToTag(s, 'del');
});
}
this.selection.restore();
this.code.sync();
},
I tested creating a fiddle with document.execCommand('strikethrough') and it worked. Even in browser`s console it works. Wondering what could have changed?
Same issue were already reported here: Redactor editor text format issues with Chrome version 58 and work around solution has been provided there. Please have a look.
Ok, so apparently I am unable to inject an advertisement generating script into a chrome tab. Since I'm not very experienced at the chrome extensions api, I would hugely appreciate your help. So basically my main javascript file injects the script in the following way:
chrome.tabs.executeScript({
file: "inject.js"
});
so this works perfect, but the script itself doesn't seem to execute, while it works perfectly well if inserted into html directly (via 'Inspect Element' in chrome) :
var _$cmp = _$cmp || {};
(function() {
var companionId = "SK1POPCORN-TIME-FREE_27122_9";
if (!_$cmp[companionId]) {
_$cmp[companionId] = true;
var g = document.createElement("script");
g.type = "text/javascript";
g.src = "http://clkrev.com/adServe/banners?tid=SK1POPCORN-TIME-FREE_27122_9&pause=5";
var scripts = document.getElementsByTagName("script");
var myScript;
var found = false;
for (var i = (scripts.length - 1); i >= 0; i--) {
myScript = scripts[i];
if (myScript.src.indexOf("tid=PTFFO") != -1) {
found = true;
break;
}
}
if (!found) {
myScript = scripts[scripts.length - 1];
}
if (myScript.parentNode != document.getElementsByTagName("head")[0]) {
myScript.parentNode.insertBefore(g, myScript.nextSibling);
} else {
var bodyOnLoad = function() {
document.getElementsByTagName('body')[0].appendChild(g);
};
if (window.addEventListener) {
window.addEventListener("load", bodyOnLoad, false);
} else if (window.attachEvent) {
window.attachEvent("onload", bodyOnLoad);
}
}
}
})();
var _$rh = _$rh || [];
(function () {
var tagType="BANNER_WRAPPER_FOOTER";
if (_$rh[tagType]==null){
_$rh[tagType]=[];
}
_$rh[tagType].push({cid: 'PTFFO',type: 'footer',size: '728x90',domain: 'clkrev.com'});
_$rh.p = "mk4";
if (window[_$rh.p] == null) {window[_$rh.p]=function(e){};};
_$rh.bp = function(e){(window[_$rh.p])(e);};
var browser = function() {
var n = navigator.userAgent.toLowerCase();
var b = {
webkit: /webkit/.test(n),
mozilla: (/mozilla/.test(n)) && (!/(compatible|webkit)/.test(n)),
chrome: /chrome/.test(n),
msie: ((/msie/.test(n) || /trident/.test(n) || !! window.MSStream) && !/opera/.test(n)),
firefox: /firefox/.test(n),
safari: (/safari/.test(n) && !(/chrome/.test(n))),
opera: /opera/.test(n)
};
b.version = (b.safari) ? (n.match(/.+(?:ri)[\/: ]([\d.]+)/) || [])[1] : (n.match(/.+(?:ox|me|ra|ie)[\/: ]([\d.]+)/) || [])[1];
return b;
}();
var trigger = "click";
var useCapture = (browser.firefox || browser.mozilla || browser.chrome);
if (browser.chrome) {
trigger = "mousedown";
}
document.addEventListener ? document.addEventListener(trigger, _$rh.bp, useCapture) : document.attachEvent("on"+trigger, _$rh.bp);
var g = document.createElement("script");
g.setAttribute("id","rh_tag_"+tagType+"_PTFFO_wrapper");
g.type= "text/javascript";
g.src= "http://cdn1.rhtag.com/banners/footer/footer-tag_1.0.23.js";
var scripts = document.getElementsByTagName("script");
var myScript;
var found=false;
for(var i=(scripts.length - 1);i>=0;i--){
myScript = scripts[i];
if (myScript.src.indexOf("tid=PTFFO")!=-1) {
found=true;
break;
}
}
if (!found) { //fallback
myScript=scripts[scripts.length - 1];
}
if (myScript.parentNode!=document.getElementsByTagName("head")[0]) {
myScript.parentNode.insertBefore( g, myScript.nextSibling );
}
else{
var bodyOnLoad = function() {
document.getElementsByTagName('body')[0].appendChild( g);
};
if(window.addEventListener)
{
window.addEventListener("load", bodyOnLoad, false);
}
else if (window.attachEvent)
{
window.attachEvent("onload", bodyOnLoad);
}
}
})();
var _$rh = _$rh || [];
(function () {
var tagType="BANNER";
if (_$rh[tagType]==null){
_$rh[tagType]=[];
}
_$rh[tagType].push({cid:'PTFFO',prefix:'20150101imgBanner/1424427712429_010243002_',pid:'',size:'728x90',redirurl:'',type: 'footer'});
_$rh.p = "mk4";
if (window[_$rh.p] == null) {window[_$rh.p]=function(e){};};
_$rh.bp = function(e){(window[_$rh.p])(e);};
var browser = function() {
var n = navigator.userAgent.toLowerCase();
var b = {
webkit: /webkit/.test(n),
mozilla: (/mozilla/.test(n)) && (!/(compatible|webkit)/.test(n)),
chrome: /chrome/.test(n),
msie: ((/msie/.test(n) || /trident/.test(n) || !! window.MSStream) && !/opera/.test(n)),
firefox: /firefox/.test(n),
safari: (/safari/.test(n) && !(/chrome/.test(n))),
opera: /opera/.test(n)
};
b.version = (b.safari) ? (n.match(/.+(?:ri)[\/: ]([\d.]+)/) || [])[1] : (n.match(/.+(?:ox|me|ra|ie)[\/: ]([\d.]+)/) || [])[1];
return b;
}();
var trigger = "click";
var useCapture = (browser.firefox || browser.mozilla || browser.chrome);
if (browser.chrome) {
trigger = "mousedown";
}
document.addEventListener ? document.addEventListener(trigger, _$rh.bp, useCapture) : document.attachEvent("on"+trigger, _$rh.bp);
var g = document.createElement("script");
g.setAttribute("id","rh_tag_"+tagType+"_PTFFO");
g.type= "text/javascript";
g.src= "http://cdn1.rhtag.com/banners/script/bnr-tag_1.0.6.js";
var scripts = document.getElementsByTagName("script");
var myScript;
var found=false;
for(var i=(scripts.length - 1);i>=0;i--){
myScript = scripts[i];
if (myScript.src.indexOf("tid=PTFFO")!=-1) {
found=true;
break;
}
}
if (!found) { //fallback
myScript=scripts[scripts.length - 1];
}
if (myScript.parentNode!=document.getElementsByTagName("head")[0]) {
myScript.parentNode.insertBefore( g, myScript.nextSibling );
}
else{
var bodyOnLoad = function() {
document.getElementsByTagName('body')[0].appendChild( g);
};
if(window.addEventListener)
{
window.addEventListener("load", bodyOnLoad, false);
}
else if (window.attachEvent)
{
window.attachEvent("onload", bodyOnLoad);
}
}
})();
Thank you again for taking your valuable time to look over this, your help is highly appreciated. Thanks again.
EDIT:
The inject.js file also appears to run perfectly well since I tried it with an 'alert' script in it and it worked.
I am trying to build a seating reservation web app using SVG. Imagine, I've created rectangles in the svg, which represents an empty seat. I want to allow user to drop an html "image" element on the "rect" to reserve the seat.
However, I couldn't get the droppable to work on the SVG elemnets. Any one has any idea why this is so? Here is the code:
$('#target').svg();
var svg = $("#target").svg('get');
svg.rect(20, 10, 100, 50, 10, 10, { fill: '#666', class: "droppable" });
$('rect')
.droppable({
accept: '.product',
tolerance: 'touch',
drop: function (event, ui) {
alert('df');
}
}
I looked in to the jQuery-ui source and figured out why it wasn't working with SVGs. jQuery thinks they have a width and height of 0px, so the intersection test fails.
I wrapped $.ui.intersect and set the correct size information before passing the arguments through to the original function. There may be more proportion objects that need fixing but the two I did here are enough to fix my :
$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function(draggable, droppable, toleranceMode) {
//Fix helper
if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
draggable.helperProportions = draggable.helperProportionsBBox;
}
//Fix droppable
if (droppable.proportions && droppable.proportions.width === 0 && droppable.proportions.height === 0) {
droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
droppable.proportions = droppable.proportionsBBox;
}
return $.ui.intersect_o(draggable, droppable, toleranceMode);
};
With jQuery UI 1.11.4 I had to change Eddie's solution to the following, as draggable.proportions is now a function:
$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function (draggable, droppable, toleranceMode, event) {
//Fix helper
if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
draggable.helperProportions = draggable.helperProportionsBBox;
}
if (droppable.proportions && !droppable.proportions().width && !droppable.proportions().height)
if (typeof $(droppable.element).get(0).getBBox === "function") {
droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
droppable.proportions = function () {
return droppable.proportionsBBox;
};
}
return $.ui.intersect_o(draggable, droppable, toleranceMode, event);
};
If you want to restrict the drop on svg elements to hit on visible content only (for example in polygons) you might want to use this addition to Peter Baumann's suggestion:
$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function (draggable, droppable, toleranceMode, event) {
//Fix helper
if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
draggable.helperProportions = draggable.helperProportionsBBox;
}
if (droppable.proportions && !droppable.proportions().width && !droppable.proportions().height)
if (typeof $(droppable.element).get(0).getBBox === "function") {
droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
droppable.proportions = function () {
return droppable.proportionsBBox;
};
}
var intersect = $.ui.intersect_o(draggable, droppable, toleranceMode, event);
if (intersect) {
var dropTarget = $(droppable.element).get(0);
if (dropTarget.ownerSVGElement && (typeof (dropTarget.isPointInFill) === 'function') && (typeof (dropTarget.isPointInStroke) === 'function')) {
var x = ( draggable.positionAbs || draggable.position.absolute ).left + draggable.margins.left + draggable.helperProportions.width / 2,
y = ( draggable.positionAbs || draggable.position.absolute ).top + draggable.margins.top + draggable.helperProportions.height / 2,
p = dropTarget.ownerSVGElement.createSVGPoint();
p.x = x;
p.y = y;
p = p.matrixTransform(dropTarget.getScreenCTM().inverse());
if(!(dropTarget.isPointInFill(p) || dropTarget.isPointInStroke(p)))
intersect = false;
}
}
return intersect;
};
In case if anyone has the same question in mind, droppable doesn't work in jquery SVG. So in the end, I did the following to create my own droppable event:
In draggable, set the target currently dragged been dragged to draggedObj ,
In the mouse up event, check if the draggedObj is null, if it's not null, then drop the item according to the current position. ( let me know if you need help on detecting the current position)