I'm running into this problem on Chrome. When I use jQuery to focus on an HTML input with part of its text selected, my page jumps to the top instead of the element itself. I've created the following jsfiddle as an example:
http://jsfiddle.net/wzs821jg/3/
I've put margins above and below each input, enough to create a scrollbar. If your resolution is taller than mine (I'm on a laptop) and you have no scrollbar, just add more margin until you do.
Add enough text to the second input to cause it to scroll (overflow on the x). You can just add jibberish, such as "asdfkasdkjfhakjsdhfaksdjhfkajshdkfajshdkfajshdkfjah", which should work fine. Once you've gotten enough text, highlight a portion of it. Now there are two methods you can use to cause the page to scroll to top:
Click the button, which has a short jQuery listener that will focus on the second input.
Focus the first input and then press tab to focus the second input
On Chrome Version 41.0.2272.101 (64-bit) on OSX Yosemite, both of those actions should cause the window to jump to top instead of focusing on the second input. I've tried on Safari, and I can't recreate the issue. I've experienced different behaviors depending on where you select the text (outside, inside, or across the overflow) and the method used to focus. Play around with it a bit.
My question is: is this a problem with Chrome or am I doing something wrong?
Edit: I've filed a bug report with Chrome pointing to this question. Unless someone has an answer, I'm just going to assume it's simply a bug within the browser.
Related
I know there are many similar topics but none of them has the solution to my problem so please read my question carefully before sending similar topic links and marking as duplicate question.
I have a content editable DIV object, something similar to TextArea control. My goal is to cancel key press events if content starts scrolling and there must be no flickering.
When i use keyUp event, it's too late to cancel and there is also no methods available to cancel changes. What's done is done at this stage.
When i use keyDown or keyPress events, they are cancelable. But new changes are not yet applied. So, i know which character is pressed etc. but i still don't know how it's going to affect the scrolling size.
Plus, i allow style changes like making the text bold or changing the font size. Since there is;
document.execCommand("undo");
command, i'm able to test these changes and undo if scrolling starts. To test things, i use a cloned div with same content. It works fine. Changes are applied to cloned div (which is visible at the moment for debugging purposes but will be invisible if the method works) and if cloned div has an overflow, changes are canceled.
My problem is at doing the same thing for key presses. It's harder to simulate what happens to editable div content than using document.execCommand for other styling options. What i need is to get the innerHTML result at keyUp stage before keyUp occurs and event is still cancelable like keyDown or keyPress.
To simulate things, i tried getting cursor position and adding pressed characters manually using substring function but content isn't plain text and i had many problems with it. For instance when i press enter, an HTML block <div><br></div> is added for newline character which messed up cursor position. I tried many ways to handle things but it's very open to bugs. So, i decided not to follow this path.
In short my question is;
How can i possibly limit an editable div area by height, not allowing
to overflow or scroll without any flickering, just canceling key press
events? Do i have to simulate something like willKeyUp or is there any
other cross browser way?
Here is jsfiddle link for my sample which works for document.execCommand case (changing font size, weight etc.) but fails at typing letters;
http://jsfiddle.net/7zQD2/
Edit: To clarify my goal at jsfiddle example, after writing 5 lines of text, either when you press enter or type to end of the line, cursor should never reach to the sixth line. Key presses should be canceled and cursor should stay at fifth line with no content changes or flickers.
One solution is to use the cloning setup you already have, but to set the opacity of the first copy to 0 and position it on top of the clone with position: absolute in the css. The first copy won't be visible, but will catch a click directed towards the visible one underneath it. You can change your event to fire on keyup.
Since the transparent div still exists, and still has height, it can measure text height for you without being visible to the user. The visible text then updates to match what is learned with the transparent text, and never reaches the 6th line or flickers.
http://jsfiddle.net/7zQD2/2/
I am having a really weird issue and can't seem to figure out if I'm looking at a javascript or css issue. Here is a jSFiddle for some context of what I am talking about. If you type in the input box and don't see a label popup, delete the text and type it again...weird huh?
I have a form that can be viewed either directly, or in an iFrame. On the inputs, I am using jvfloat.js to give floating labels using the placeholder values.
$(document).ready( function() {
$('input').jvfloat();
});
I get different results across browsers (current releases) and also, oddly enough, when in an iFrame or not.
Chrome
In IFrame:
Typing in text field doesn't popup label. Inspection shows "activeLabel" class added successfully, but it doesn't seem to render. Seems like a CSS transform isn't working to move the label up from behind the input.
Outside IFrame:
Works as expected.
Firefox
In IFrame / Outside IFrame:
Works as expected
I haven't tried it in any other browsers. Every now and then the labels don't work and I can't repeat the problem consistently.
In the jsFiddle, can you see any major problems with the javascript or CSS that would cause this weird behavior?
It's a CSS issue.
You're using display, visibility, and opacity to show/hide your floating placeholder. That's overkill, you only need one! I get opacity, you need it for the effect.
I dropped any use of visibility, and it now works:
http://jsfiddle.net/njjZr/3/
There are a lot of plugins dedicated to implementing HTML5's placeholder attribute in older browsers. This is the one we're using.
While it does't use the placeholder attribute like some of the others options, it does (after our tweaks) preserve the text on focus - focusing onto an input field doesn't erase its contents.
We have one annoyance with it though - when you hit TAB and move into an input field with the default (/ empty) text, the default text first gets selected, until we fix this and position the caret at position 0 ourselves, causing a noticable flickering effect.
To reproduce, just check out the fiddle I linked to above (here it is again). Is there an easy solution to this problem (needs to work on IE9+/Firefox/Chrome)?
Here is an alternative solution. Position a element over top that holds the default text. If the input gets focus hide the default text and on blur check to see whether you need to hide the text or not. I realize it doesn't answer the question directly, but it seems like the method now is getting a lot more complicated than necessary. One other thing about the method now is if someone tried to select any part of the default text it has a very unexpected behavior.
I am developing application using webview in android. i am loading a page into webview and splitting multiple columns dynamically using CSS3 webkit property. once user reach the last page/column i have to show the TOC confirmation dialog. can anyone please advice me how to do that ?
height:600px;
-webkit-column-width:600px;
-webkit-column-count:auto;
How your TOC confirmation dialog is setup?
One possible solution could be to use the :nth-last-of-type(N) selector to select last page/column element http://reference.sitepoint.com/css/pseudoclass-nthlastoftype.
Try putting a small element at the end of the text, and then wait for it to appear on screen. It is easily done using jQuery with jquery-appear.
I forked #visualidiot's jsfiddle to create an example using said techniques. Haven't tested it using jQuery Mobile though.
I put a <span> element at the end of the text. The span is floated right to make sure (most of) the last column is shown. In this example, the <span> is not empty (and highly visible), but it would be better if it was just empty.
The javascript confirm() dialog screws up the scrolling a bit by locking mouse focus on the scroll slider (tested in Chrome 16 on Windows). Showing a confirm dialog in HTML would not.
Since .appear() works for vertical scrolling as well, this degrades nicely when not having -webkit-column-* available (tested using IE9).
Get the total width of your element, and divide it by the width of a single column. Here's an example: http://jsfiddle.net/Ecp9M/
I have an html page where I set the focus on the first input element on load. I can see that the focus is set because I ask the background of the element to go orange and I can see the orange background. However, the cursor is not shown in the element.
Then when I click on the other input elements, I can see the focus move to them but still no cursor is shown. The cursor only appears when I use the tab key.
Please could someone explain to me why this happens and how I can make this cursor appear without having to use the tab key?
This is for IE8 only. (It's an intranet site)
Code as requested for how I'm setting focus:
$(document).ready(function(){
$('#rachel').focus();
});
EDIT
I didn't think to mention that the problem is happening on a popup window that looks to be implemented like a layer. Is it possible for layers to block the cursor?