Limiting an editable div area by height, simulating onkeyup event in Javascript - javascript

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/

Related

mouseover fires inadvertently for image on layout change

I have a number of images in my HTML document.
The user triggers some changes (AJAX calls) when clicking on an image or by pressing a key.
To keep track of the latest image (client-side), I use javascript and onmouseover, assigning the image ID to a javascript-variable which in turn is used to fill the AJAX calls.
Everything works well (even it there might be better ways to do it), but sometimes it takes some time to refresh the image. For a moment, it ceases to exist, causing the image next to it to jump left.
This, of course, moves that image underneath the pointer, triggering the mouseover event.
How(?) is it possible to distinguish between a mouseover event caused by mouse-movement from one fired by a layout change?
The short answer is you can't really tell what caused a mouseover event, other than the cursor moved over a new DOM element (or some other things, like a tap on a touch device). A layout change is just something that happens independent of this event.
One possible solution to your actual problem is to avoid the problem altogether by preventing the layout jump. For example, you could use a placeholder element to fill the space while the next image loads.
Alternately, your logic could almost-certainly be made more-robust so as not to depend on something as fragile as this.

Focusing input with selected text causes scroll to top

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.

Detect word wrap in contenteditable span

I have contenteditable span with a max-width setting that allows the user to enter text. What I'm looking to do is detect when the user reaches this width limit and a new line is displayed on the page. I am trying to create a WYSIWYG editor that creates text, (in SVG), exactly the way it looks in the contenteditable span when the user presses enter. I have successfully captured the enter event, so that is not an issue, I am looking for a way to either detect the word wrap, or calculate where it should occur. Any help is appreciated. (I can post sample code if needed)
When the height of the element changes, you know you have word-wrap occurring.
Monitor for a change event and see if the height changed. If it did, you have a word-wrap (or un-wrap). I threw together an example:
http://jsfiddle.net/eZDRD/

How to check when a div resizes, using Javascript or Jquery

So I've got a web applcation in the midst of wireframing, but I've run into an issue that requires a technical solution before I can solidify this model; that being:
Fig. #1 User creates new 'text-field'
element (a div with a max-width.)
User then begins typing into said
element until...
Fig. #2 The element reaches it's
max-width, the text drops to a new line and a 'new' background image (in
the form of another div) is created (with it's opacity and position animated for effect) to accommodate the larger element sze.
This is a rough outline of the intended functionality (given at this moment, I'm not sure how to have a text-field that behaves like a div with max-width yet) but I'm curious about how to create the event handler for the 2nd step; I thought about checking on every 'keydown' event, but that seems inefficient...
Does anyone have any advice or ideas for tackling something like this? Thanks!
The 'keydown' or 'keyup' event is the first thing that comes to mind. If you decide to do it this way you will have to
check for the html elements size each time and compare it to the old (save in a variable) one.
Easiest way seems to be to bind a handler to the html element and let it fire when the size changes.
I do not know if such an event exists, but if then thats the way to go.
(+1 for your very descriptive Question)
You could try using the CSS3 transition functionality:
http://slides.html5rocks.com/#slide42
That way the elements you want can be animated by the browser itself.
Disclaimer: Obviously, this doesn't work with more complicated effects.
In MSIE an onresize should fire.
Not sure how to attack the width issue where an input field auto sizes untill max width then wraps. You could use a monospace font inside the text field so that you could use javascript to monitor and control the growth of the box horizontally uptill the max width.
To approach the height auto grow you would be better using a textarea with it set to one row to begin with so it looks like an input box and then when the text auto wraps to the next row, which it will do, you can check the scollHeight of the textarea and check the actual height of the textarea, subtract them and you get the height you need to grow the textarea to stop the vertical scroll bars appearing.
The above will make the scroll bars flick on and off briefly while your javascript does it magic. You can use overflow:auto; to hide the scroll bars but then I don't know if scrollHeight will still read correctly. You will need to experiment.
Also take note on my comment above about setting an interval on keydown and checking the input length to stop the repeating key down text issue.

JQuery Input Focus Manipulation

Had a idea and now trying to make it happen.
Idea: Have a HTML page with several inputs with CSS to make it look liked lined paper. Than at the end of each line move the focus from one input to the next so the user can continue input on a page mimicking lined paper.
Problem: Have no way of detecting or capturing an event when the input reaches the end of the line, thus no way to move the focus from one field to the next.
I tried using the maxlength attribute on the inputs but this didn't work because of course some letters are wider than others so the lines never truly 'filled up'
Possible solution: change inputs to divs with a inner span wrapping the text, compute width of span on keyup event and match it to the overall width of the div, if greater than do work to trim text and move text & focus to the next div.
Problem with that is its messy, and could cause bad performance on the page depending on the amount of lines i decide to use.
Question: Is there any event I can grab from the input when the end of the viewable area has been reached to be able to fire my function?? OR maybe someone could have a better idea of how to implement this?? OR am i trying to recreate the wheel and something for this has already been written (i couldn't find anything on Google)??
On each keyup trigger a function to count the number of characters in the input field. If you reach your limit move focus to next line :)
Here is an example with using styling on text area. Could load up a nice handwriting font too.
http://stuff.alphaready.com/notepad/index.html

Categories

Resources