I was trying to print a anual report but i need to change 2 texts around the page, one of them has only a class attribute. Im new at js so i made this.
<div id="formBusqPresElec:dtResBSPE_paginator_bottom" class="ui-paginator ui-paginator-bottom ui-widget-header">
<span class="ui-paginator-current">Mostrando 1-20 de 1626 registros</span>
</div>
And the other has an id.
<div id="fBusqSPE">Mostrando 20 de 1626 registros</div>
I made it work on Chrome
function imprimir() {
var oldText = document.getElementById('fBusqSPE').innerText;
document.getElementById('fBusqSPE').innerText = document.getElementsByClassName('ui-paginator-current')[0].innerText;
window.print();
document.getElementById('fBusqSPE').innerText = oldText;
}
But in firefox throws
[10:48:48.330] TypeError: document.getElementsByClassName(...)[0] is
undefined
Edit: So let me explain more.
Actually im working inside 2 iframes, which the first one is for the menu, and the other one is for more options. Then the central iframe is used to show the actual report.
Maybe I must define which iframe I want to retrieve those elements.
There are 2 problems here. The first causes your error of document.getElementsByClassName(...)[0] is undefined and once overcome, the second is that Firefox does not support innerText
The only way to generate the specified error in Firefox is for no elements with the specified class being present on the page. This is demonstrated by the following code
<div class="a-test"></div>
// on page load
document.getElementsByClassName("b-test")[0].innerHTML="Test";
JSFiddle:http://jsfiddle.net/UL2Xs/
If you watch the console when running the above fiddle, you'll see the same error as you get.
Is it possible that your javascript is running before the page has finished loading?
The second, and more minor issue is that FireFox does not support innerText. You should use .textContent or possibly .innerHTML.
You probably should use:
iframe.contentDocument.getElementsByClassName(...)
(see: contentDocument for an iframe)
Basically .innerText will not work in FF. FF uses textContent property.
var text = element.textContent;
element.textContent = "this is some sample text";
Update 3 - 10/09/2013: Just tested this with Version 29.0.1547.66 m and the problem still persists. If anyone else can test this out and let me know the results that would be great. You need an inline element such as a span with some text in, have it relatively positioned and moved by however many pixels you want from left and top. Then set up some jScript to change the current inner html of the element to something else and you should see it remain the same in the viewport but change correctly in the DOM.
Update 2: After a bit more testing the problem seems to occur on elements that are inline such as span, or have CSS that makes them inline, but that are also relatively positioned, it seems to be this combination that is causing the issue. After posting the bug on Chromium it has been flagged as a cr-Blink-Rendering issue which looks to be the engine that renders the DOM in the broswer viewport. I am using Version 29.0.1547.57 (the current version ends .66 but mine has not updated due to an error). So if you're on the latest version this issue may no longer be there.
Update: On further investigation I think the problem is with the latest Chrome build Version 29.0.1547.57 m As I tested the element in an inline fashion in IE9 and Firefox 21 and it worked fine. I have filed a bug report for this on chromium
I'm having a problem (that I have not been able to recreate with jsfiddle) where I perform an ajax request, obtain some values and place them within span elements that exist within my page.
I have a very odd problem where the ajax request is working and bringing the values back. The values are being inserted into the span elements via jQuerys .html' method and when I check the DOM using Chrome developer tools I can see the new value in the span.
However, what I see on the page doesn't reflect this, it still shows the old value. Yet if I attempt to highlight the value, it instantly changes to the correct value (the value that is showing in the DOM).
I have even tried to update the spans value before the ajax call (as the value I am using is being obtained from jQuery UI's slider widget) but this still yields the same results.
Has anyone else come across this?
EDIT: Here is some of the code
HTML
<div id="NewLoanSliderAmount" class="NewLoanSliderRules"></div>
<span id="NewLoanSliderAmountDisplay" class="NewLoanDisplay">£600</span>
The slider code. This is the version where I attempt to update it directly from the slider value
$("#NewLoanSliderAmount").slider({
value: amount,
min: 300,
max: amount,
step: 100,
change: function (event, ui) {
$("#NewLoanSliderAmountDisplay").html("£" + ui.value);
window.CkSpace.GetLoanValues();
}
});
Here is the ajax code:
(function (CkSpace, $, undefined) {
CkSpace.GetLoanValues = function () {
var url = "/Home/UpdateAPR";
$.get(url, { Amount: $("#NewLoanSliderAmount").slider("value"), Length: $("#NewLoanSliderLength").slider("value") }, function (data) {
$("#NewLoanAmount").html("£"+data.LoanAdvance);
$("#NewLoanLength").html(data.LoanTerm);
$("#NewLoanMonthlyCost").html("£"+data.LoanInstalment);
$("#NewLoanTotal").html(data.LoanGrossRepyable);
$("#NewLoanAPR").html(data.LoanAPR+"%");
$("#NewLoanSliderAmountDisplay").html("£" + data.LoanAdvance);
});
}
} (window.CkSpace = window.CkSpace || {}, jQuery));
EDIT 2:
Another thing to note is that if i set a break point on the span being populated and step through it, it updates perfectly every time in Chrome developer tools
I've figured out what was causing the problem although I don't know WHY it is causing the problem.
First off I tried changing the span to a div and adding display:inline to the css. It still didn't work.
I then removed the inline display and all of a sudden, as a block level element it works.
If anyone knows more about why this is and can elaborate then please do!
EDIT: On further investigation I think the problem is with the latest Chrome build Version 29.0.1547.57 m As I tested the element in an inline fashion in IE9 and Firefox 21 and it worked fine. I think it's time to file a bug report!
Answered:
Result can bee seen here: http://apitecture.com/dev/cked/index.2.html
Working code excerpt:
$('a.color').on({
click : function()
{
var self = $(this);
var editor = self.data('editor-instance') || CKEDITOR.instances['one'];
var button = self.data('editor-button') || editor.ui.create('TextColor');
if (!self.data('editor-instance'))
{
self.data('editor-instance', editor);
}
if (!self.data('editor-button'))
{
button._.id = self.attr('id');
self.data('editor-button', button);
}
button.click( editor );
}
});
I am working on a rich GUI based content editor.
I have come to conclusion, to use CKEditor for the text styling part, because it's 4th version comes with a lot of customization and configuration options, plus, is very well built.
I started to implement some of the commands in CK to my own toolbar, that isn't connected with CK. Apparently, my ventures weren't as easy as I thought they'd be...
http://apitecture.com/dev/cked/ <- here I have deployed a sandbox version.
On the left hand side, you can see a veeeery stripped down version of CK, and a custom toolbar.
On the right, exact replica, but with CK's native toolbar.
Simple commands, like Link and Bold, as you can see, are working, due to their simple nature.
The problem is with the Text Color button. It isn't bound to a command in CK, therefore I cannot execute it externally - well, at least I haven't found a way how.
Maybe somebody is pro enough with CK and could help me to figure this out?
The goal is to have the same functionality on my toolbar's button as the CK one.
I have found out, that upon clicking the Text Color, the color selection popup is appended to body, so, it doesn't extend upon CK styles and should, in theory, work standalone. Though, I cannot seem to find the code where the HTML is appended to body.
I have tried to get the UI button instance:
var color = CKEDITOR.instances['one'].ui.create('TextColor');
// and fire click on it
color.click();
But, that caused a partially expected (due to click not being started from toolbar) exception:
Uncaught TypeError: Cannot read property 'elementMode' of undefined ckeditor.js:552
CKEDITOR.ui.floatPanel.CKEDITOR.tools.createClass.$ ckeditor.js:552
CKEDITOR.ui.panelButton.CKEDITOR.tools.createClass.proto.createPanel ckeditor.js:541
e ckeditor.js:540
$.on.click cktest.js:59
v.event.dispatch jquery.min.js:2
o.handle.u
Seeing (from: console.log(color.click)) that the function accepts a parameter, I thought that I could provide any DOM element to it, by calling color.click( element );, that also caused error:
Uncaught TypeError: Cannot read property 'baseFloatZIndex' of undefined ckeditor.js:547
CKEDITOR.ui.panel.render ckeditor.js:547
o ckeditor.js:552
CKEDITOR.ui.floatPanel.CKEDITOR.tools.createClass.$ ckeditor.js:553
CKEDITOR.ui.panelButton.CKEDITOR.tools.createClass.proto.createPanel ckeditor.js:541
e ckeditor.js:540
$.on.click cktest.js:59
v.event.dispatch jquery.min.js:2
o.handle.u
Here is link to the source where the color plugin and it's buttons is introduced: https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/colorbutton/plugin.js
Update:
I think this happens with every single button, that has dropdowns instead of dialogs.
Update 2:
Reinmar's answer did show some light at the end of the tunnel: http://apitecture.com/dev/cked/index.2.html
In the example, the "Color" text-link on the right can be clicked, and the dropdown shows, plus, it functions perfectly (besides that the shadow is enforced). The only catch here is, it works for the first time. Resulting in:
TypeError: Cannot read property 'title' of undefined
at CKEDITOR.ui.panel.block.CKEDITOR.tools.createClass.$ (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:549:298)
at new b (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:26:149)
at Object.CKEDITOR.ui.panel.addBlock (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:547:503)
at CKEDITOR.ui.floatPanel.CKEDITOR.tools.createClass.proto.addBlock (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:553:409)
at CKEDITOR.ui.panelButton.CKEDITOR.tools.createClass.proto.createPanel (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:541:333)
at e [as click] (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:540:304)
at HTMLAnchorElement.$.on.click (http://apitecture.com/dev/cked/cktest.2.js:64:24)
at HTMLAnchorElement.v.event.dispatch (http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js:2:38053)
at HTMLAnchorElement.o.handle.u (http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js:2:33916)
For every subsequent click.
You've asked a hardcore question :). I'm CKEditor core dev for last 1 year and I had to spend an hour digging in toolbar, panels and buttons. This part of CKE's API is really twisty and definitely lacks of documentation. But the worst part of it is that it's not really reusable, cause all the parts are tightly coupled.
Anyway. I tried to reuse colorbutton and I succeeded. On editor without toolbar plugin (this is important) I was able to open it for specified element:
And it even seems to work :) (at least on Chrome).
I'm curious how hard it will be for you to replace toolbar plugin with your own basic implementation (perhaps without a11y support and other heavy stuff). At the moment your bold and link buttons work correctly on Chrome, FF, Opera and IE7-9 (this in fact proves how cool CKE is because it does a lot in the background ;). I hope that you won't encounter any serious troubles.
Some tips:
You don't need to call editor.getCommand().exec(). There is an editor.execCommand() method.
You'll probably want to activate/deactivate buttons depending on context (caret location). Each command has its state and it's automatically updated on selectionChange event.
Good luck. And it will be cool if you share your thoughts and result of work with us :). Feedback will be very useful if someday we'll decide to improve this part of API.
I have a problem and I can't figure out what exactly is causing this behavior. I cannot access my input fields and textareas on my HTML form.
Unfortunately, the JS, HTML and CSS are very large, so I can't really post it all here.
Can anybody tell me what to look for when debugging this strange behavior?
UPDATE
If I move the cursor over the input field I can see the text cursor, but when I click it the field does not get the focus. I can access the field via pressing the Tab key and if I right click on it and then click on the field I also get the focus for it.
...and nope, they don't have the disabled or readonly attributes ;-)
when i click it the field does not get the focus. i can access the field via pressing the "tab-key"
It sounds like you've cancelled the default action for the mousedown event. Search through your HTML and JS for onmousedown handlers and look for a line that reads.
return false;
This line may be stopping you from focusing by clicking.
Re: your comment, I'm assuming you can't edit the code that adds this handler? If you can, the simplest solution is to just remove the return false; statement.
is there a way to just add functionality to the event-trigger by not overwriting it?
That depends on how the handler is attached. If it's attached using the traditional registration method, e.g. element.onmousedown, then you could create a wrapper for it:
var oldFunc = element.onmousedown;
element.onmousedown = function (evt) {
oldFunc.call(this, evt || window.event);
}
Since this "wrapper" doesn't return false, it will not cancel the default action (focusing) for the element. If your event is attached using an advanced registration method, such as addEventListener or attachEvent then you could only remove the event handler using the function name/reference and reattach it with a wrapped function similar to the above. If it's an anonymous function that's added and you can't get a reference to it, then the only solution would be to attach another event handler and focus the element manually using the element.focus() method.
I had this problem too. I used the disableSelection() method of jQuery UI on a parent DIV which contained my input fields. In Chrome the input fields were not affected but in Firefox the inputs (and textareas as well) did not get focused on clicking. The strange thing here was, that the click event on these inputs worked.
The solution was to remove the disableSelection() method for the parent DIV.
Use the onclick="this.select()" attribute for the input tag.
I know this is a very old thread, but this just happened to me recently; took me a while to figure it out.
This same issue can be caused by putting 'input' elements inside of pair of 'label' tags.
In my case, I had intended to create a pair of 'div' tags but instead I accidently created a pair of 'label' tags, then inserted some text input fields 'input type="text"..' using DOM.
It displayed normally on the screen, but when I clicked on any of the text fields, the cursor kept jumping back to the first 'input' and really acting erratic.
Took me a while to figure this out because this behavior is subtle, and not at all what I would have expected from making this kind of mistake.
bsnider
I've been struggling with the same problem a while ago. I was using the jquery.layout plugin in a modal jquery-ui dialog and I couldn't access any of the fields in it.
It appeared to be a z-index problem (some div was over my input fields, so I couldn't click them). You should check it out and try changing the z-index value of your input fields.
This happens sometimes when there are unbalanced <label> tags in the form.
I had this problem too, and in my case I found that the color of the font was the same color of the background, so it looked like nothing happened.
I have read all the answers above, and some directed me to the problem, but not to the solution for the problem.
The root cause of the problem is disableSelection(). It is causing all the problems, but removing it is not a solution, as (at least in 2016 or slightly before), on touch-screen devices, you "have" to use this if you want to be able to move objects with jQuery.
The solution was to leave the disableSelection() to the sortable element, but also add a binding action just above:
$('#your_selector_id form').bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(event) {
event.stopImmediatePropagation();
})
The form in the jQuery element is just to stop propagation on the form, as you might need propagation on some elements.
This can occur in bootstrap if you do not place your columns inside a <div class ='row'>. The column floats are not cleared and you could get the next column overlying the previous, hence clicks wont hit the dom elements where you expect.
If you are faced this problem while using canvas with DOM on mobile devices, the answer of Ashwin G worked for me perfectly, but I did it through javascript
var element = document.getElementById("myinputfield");
element.onclick = element.select();
After, everything worked flawlessly.
I had the similar issue - could not figure out what was the reason, but I fixed it using following code. Somehow it could not focus only the blank inputs:
$('input').click(function () {
var val = $(this).val();
if (val == "") {
this.select();
}
});
For Anyone Using Electron
For anyone having this issue with Electron specifically, the problem for me was using alert before selecting the input fields. Apparently alert and confirm aren't entirely supported by Electron, and therefore can mess up input fields. If you'd still like to use them, refer to this post: https://stackoverflow.com/a/38859135/12293837
I had this problem because of this code:
$("#table tbody tr td:first-child").bind("mousedown", function(e){
e.preventDefault();
$(this).parents('tr').removeClass('draggable');
});
I resolved it by removing
e.preventDefault();
New code:
$("#table tbody tr td:first-child").bind("mousedown", function(){
$(this).parents('tr').removeClass('draggable');
});
Just in case someone else is looking for this answer, we had a similar problem and solved it by changing the z-index of the input tags. Apparently some other divs had extended too far and were overlapping the input boxes.
I had this problem for over 6 months, it may be the same issue. Main symptom is that you can't move the cursor or select text in text inputs, only the arrow keys allow you to move around in the input field. Very annoying problem, especially for textarea input fields. I have this html that gets populated with 1 out of 100s of forms via Javascript:
<div class="dialog" id="alert" draggable="true">
<div id="head" class="dialog_head">
<img id='icon' src='images/icon.png' height=20 width=20><img id='icon_name' src='images/icon_name.png' height=15><img id='alert_close_button' class='close_button' src='images/close.png'>
</div>
<div id="type" class="type"></div>
<div class='scroll_div'>
<div id="spinner" class="spinner"></div>
<div id="msg" class="msg"></div>
<div id="form" class="form"></div>
</div>
</div>
Apparently 6 months ago I had tried to make the popup draggable and failed, breaking text inputs at the same time. Once I removed draggable="true" it works again!
I'm using JQuery UI and Bootstrap so I faced this issue and I think it is a conflict between the two as in normal case the textarea or the input filed is editable by nature but I made this solution after testing all the above answers but none solve the cross browser support for all major browsers, but I solved it and I like to share my solution you can use it on input text and textarea
(Tested on Desktop: IE (All Versions), Chrome, Safari, Windows Edge, Firefox, Visual Studio Cordova Ripple Viewer on Windows & Visual Studio Cordova Windows 10 Store App)
(Tested on Mobile: Chrome, Firefox, Android Internet Browser & Visual Studio Cordova App on Android & Visual Studio Cordova Windows 8 + 8.1 + 10 Phone App)
This is the HTML Code:
<textarea contenteditable id="textarea"></textarea>
This is The CSS Code:
textarea {
-webkit-user-select: text !important;
-khtml-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
/*to make sure that background color and text color is not the same (from the answers above)*/
background-color:#fff !important;
color:#733E27 !important;
}
This Is The JQuery Code On Document Ready
$("textarea").click(function() {
setTimeout(function(){
$("textarea").focus();
//add this if you are using JQuery UI (From The Solutions Above)
$("textarea").enableSelection();
var val = $("textarea").val();
if (val.charAt(val.length-1) !== " " && val.length !== 1) {
alert(val.length);
val += " ";
}
$("textarea").val(val);
}, 0);
});
if (navigator.userAgent.indexOf('Safari') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) {
//alert('Its Safari or chrome');
$("textarea").onfocus(function(e) {
setTimeout(function(){
var end;
if ($("textarea").val === "") {
end = 0;
} else {
end = $("textarea").val.length;
}
if ($("textarea").setSelectionRange) {
var range = document.getElementById('textarea').createTextRange();
if (range) {
setTimeout(range, 0, [end, end]);
} else { // IE style
var aRange = document.getElementById('textarea').createTextRange();
aRange.collapse(true);
aRange.moveEnd('character', end);
aRange.moveStart('character', end);
aRange.select();
}
}
e.preventDefault();
return false;
}, 0);
});
}
You can test it on my web application at www.gahwehsada.com
When you say
and nope, they don't have attributes: disabled="disabled" or readonly ;-)
Is this through viewing your html, the source code of the page, or the DOM?
If you inspect the DOM with Chrome or Firefox, then you will be able to see any attributes added to the input fields through javasript, or even an overlaying div
I just found another possible reason for this issue, some input textboxes were missing the closing "/", so i had <input ...> when the correct form is <input ... />. That fixed it for me.
In my case it was Bootstrap popup in opened state.
Text input was in another calendar popup on top of Bootstrap one, input got its focus back after removing tabindex="-1" attribute from Bootstrap modal.
iPhone6 chrome
Problem for me was placing the input field inside <label> and <p>
like this :
<label>
<p>
<input/>
</p>
</label>
I changed them to
<div>
<div>
<input/>
</div>
</div>
And it works for me .
After check this answer, Please check other answers in this page, this issue may have different reasons
Its worth adding that having the property pointer-events:none on your input label will also produce this unwanted behaviour.
It might be because of invalid for attribute in the label attribute
<input type="text" id="your_name" name="your_name">
<label for="your_name">Your Name</label>
<input type="text" id="your_email" name="your_name">
<label for="your_name">Your Name</label>
I have tried to update the for attribute in the second label to your_email instead of your_name and its works for me
<label for="your_email">Your Name</label>
This will also happen anytime a div ends up positioned over controls in another div; like using bootstrap for layout, and having a "col-lg-4" followed by a "col-lg=8" misspelling... the right orphaned/misnamed div covers the left, and captures the mouse events. Easy to blow by that misspelling, - and = next to each other on keyboard. So, pays to examine with inspector and look for 'surprises' to uncover these wild divs.
Is there an unseen window covering the controls and blocking events, and how can that happen? Turns out, fatfingering = for - with bootstrap classnames is one way...
I had the same problem. I eventually figured it out by inspecting the element and the element I thought I had selected was different element. When I did that I found there was a hidden element that had z-index of 9999, once I fixed that my problem went away.
the problem for me was that I was using class="modal fade", I changed it for class="modal hide". That solved the issue.
I had the same problem. Tore my hair for hours trying all sorts of solutions. Turned out to be an unclosed a tag.Try validate your HTML code, solution could be an unclosed tag causing issues
I had this issue using Bootstrap + contact form 7.
I for some reason I put the label as the container of the form and that was the issue for not being selectable on mobile.
<label>
<contact form>...</contact form>
</label>
Seemed to break all inputs except the first input and the submit.
I had the same issue and the fix was to remove the placeholders and I changed the design of the form to use labels instead of placeholders...
I had this issue caused by a sort of overlap of a div element with a bootstrap class ="row" over a "brother" div element with the class="col", the first hid the focus of the second div element.
I solved taking outer the div row element from that level of the divs' tree and so rebalancing bootstrap logical hierarchy based on the row and col classes.
I had this same issue just now in React.
I figured out that in the Router, Route. We cannot do this as it causes this issue of closing the mobile keyboard.
<Route
path = "some-path"
component = {props => <MyComponent />}
/>
Make sure and use the render instead in this situation
<Route
path = "some-path"
render = {props => <MyComponent />}
/>
Hope this helps someone
Daniel