I have a textarea with a width of 800px and a height of 500px.
If I paste a text which needs height more than 500px then the scrollbar is being created in order to scroll up and down which is fine.
But If I paste something on the top then it jumps again to the bottom of the textarea.
How can I stop this behaviour?
Thanks in advance!
When the content is added the cursor is placed at the bottom of the textarea, thus it scrolls to the bottom.
To prevent this you need to place the cursor at another position. For example if you want the cursor to stay at the same position in the text while new text is inserted at the top you can get the length of the inserted text, add it to the current cursor position, then add the text and place the cursor at the sum of both.
In JavaScript you can do it like this:
Take the textarea.selectionEnd as the current cursor position
Add it to text.length
Insert the text
Set both textarea.selectionStart and textarea.selectionEnd to the sum from point 2
Here’s an example function:
function addText(area, text) {
var cursorPos = area.selectionEnd;
var textLength = text.length;
area.value = text + area.value;
area.selectionEnd = area.selectionStart = cursorPos + textLength;
area.focus();
}
I’ve also made a demo where you can first click anywhere in the textarea then type a text in the input field and then click the button. The text will get added and the textarea will be focused with the correct cursor position.
Related
I found this Fiddle and edited it.
At current on any keypress the div on left side of textarea appears ( gray color div ) at caret position where the text is written.
I want the div to appear on Keypress of Enter next to caret position everytime ( get the caret position and show div next to it on enter press ) and if any other key press disappear the div.
I'm bit confused how the keypress used here in this code.
here : http://jsfiddle.net/eMwKd/30/
I have the following problems:
1.) I want to use a contenditable div or a textarea ( preferrably a contenteditable div because I can also use there html tags, not just text ), as a writing pad. However I want the writing to STOP once the cursor reaches the BOTTOM RIGHT corner of the div/textarea. This seems hard to implement. I have managed with max-height and overflow:hidden to make the element ( div / textarea ) to not expand, however the user can still type, it will just be invisible, something unwanted. What I want is the writing to stop when the cursor reaches the bottom right corner and then go on, on a new empty "page".
My first idea was to use some monospace font and calculate the max chars allowed but the issue is that 1st not all browsers show the same number of monospace characters of the same font, per line and 2nd the div can be variable in size, not constant.
The ideal would be a div so that i can enter html tags ( bold, italic, etc. ) and the div that shows the content can be of a different size, depending on the screen resolution.
2.) Given a div which represents a "page" which gets filled with a text/html from the database, how can I show only the content that fills the div, and when the user presses a "next page" button, show the next content. This seems undoable to me, figuring out via javascript how much content can fill into the div.
Any ideas on these two correlated problems would be greatly appreciated
No flash, no java, no plugins. only: html,css,javascript
Thanks in advance.
you can try the below code.
<div id="editable_div"></div>
var content_id = document.getElementById("editable_div");
max = 10;
//binding keyup/down events on the contenteditable div
$('#'+content_id).keyup(function(e){ check_charcount(content_id, max, e); });
$('#'+content_id).keydown(function(e){ check_charcount(content_id, max, e); });
function check_charcount(content_id, max, e)
{
if(e.which != 8 && $('#'+content_id).text().length > max)
{
// $('#'+content_id).text($('#'+content_id).text().substring(0, max));
e.preventDefault();
}
}
I have a div tag that is contenteditable so that users can type in the div.
If a user selects some text to make it bold, the following code is executed:
browser.execute("document.execCommand(\"Bold\");
document.getElementById(\"EditDIV\").focus()");
After the execution, the focus is lost and the vertical scrollbar in the browser moves to the top of the browser.
I want the cursor to stay at the text where it was before.
I tried the following:
Store the selection position x, y:
Code:
cursorPos=document.selection.createRange().duplicate(); clickx = cursorPos.getBoundingClientRect().left; clicky = cursorPos.getBoundingClientRect().top;
Restore the selection position:
Code:
cursorPos = document.body.createTextRange(); cursorPos.moveToPoint(clickx, clicky); cursorPos.select();
But this code finds the position of the selected text with respect to the beginning of the current view in the browser. Hence, the cursor stays at the same position but the text moves down.
It is expected to make the cursor stay at the text that was selected.
I have something like a Text editor similar to the one used here (WMD Markdown Editor). The problem I have is after modifying text with JS, the textarea scrolls back to the top ...
http://jsfiddle.net/qTRhu/1/
http://screenr.com/7uz
As I remember this is an issue with one browser particularly (firefox?). You need to save and restore the scrollbar position and (depending on your design) the selected text.
var scrollTop = txtarea.scrollTop;
......
txtarea.scrollTop = scrollTop;
I have a long text field and what I want to do is that when a user types an '#' character a list of users appear just like a typical auto-complete. However I want the list of users to appear below the '#' character which could be 20-30 characters in from the start of the text box.
I've found many jQuery auto-complete plugins but none that position the list below the current caret position.
I can get the text field position using $('#textfield').position() and I can get the caret position using something like this but that gets the character index from the text value and not the pixel position.
How can I get the current carret position of a text field relative to the page in pixels in order to position an element below it?
relaying on this anwsear: Calculate text width with JavaScript
what you can do is have a div on the screen which is visible:hidden
then every time a new charecter has been entered to the textbox change the inner html of the div
so the textbox value and the div innerhtml will always be synced.
then when you want to popup your autocomplete you will add the width of the div. to the
offset left postion of the textbox.
and thats it...
and avcorse you will need that the div and the textbox will have the same font...
This jQuery plugin does what you're after:
http://plugins.jquery.com/project/caretPosition
I haven't tested it, but going by the code it looks like it creates a temporary <span> with the same content as your <textarea> (up to the cursor) and makes wild assumptions about font, line height, whitespace and word wrapping when measuring it.
You could try extending it to:
Copy the font, line height, whitespace and word wrap styles from the target <textarea>
Hide the temporary <span> without affecting the measurement by wrapping it in a <div style="height: 0; overflow: hidden;"> or positioning it absolute -9999px, -9999px
$(this).position().top ;
$(this).position().left ;
$(this).position().right ; etc... :-)