Is it possible to place the HTML5 placeholder on the bottom of a textarea, and have it so when the user types, it goes to the bottom line, then pressing enter will push the text up?
I'll explain a little better. What I would like, is to have a 5 row textarea, and instead of starting at the top of the box, and text moving down as they enter new lines, I want it start at the bottom, and move up as they enter new lines.
If not, guess I will just need to use a background image and make it blank onkeyup
This has been asked before.
Here's the code from the answer to that thread (uses jquery):
if (browserIsIE) {
var range= element.createTextRange();
range.collapse(false);
range.select();
} else {
element.focus();
var v= element.value();
element.value= '';
element.value= v;
}
As you can see IE needs some special treatment to function properly. That said, the basic logic of this script is to focus on a certain textbox, pull out it's value and place it back in. This then moves your flashing cursor to the end of whatever is already in the text box.
Related
When entering text into a textarea manually, it remains visible at all times. However I'm using a simple javascript function to enter some text when an icon on the page is clicked.
onClick="addline('xyz')
function addline(sometext)
if(sometext == "xyz")
{
document.getElementById('thearea').value = "Hello world!\n";
}
The problem is, when text entered this way reaches the bottom of the textarea, it disappears from view and the scrollbar just lengthens.
My question is, is there any way to keep the text visible at all times? Thanks.
Thank you for referring me to a similar request for assistance. I have done what I thought was a comprehensive search here and on other web sites to a solution to this issue before posting. Unfortunately, the code suggested doesn't make any difference, the text added using the above function remains hidden in my textarea until the scrollbar down arrow is clicked.
Here’s a strange problem I am facing.
I have a contenteditable field and implemented autocomplete functionality for hashtags for it. When a user starts typing a hashtag, they will see a popup box with autocomplete suggestions, like this:
The user can insert a suggested hashtag either using keyboard (selecting it with up/down arrows and pressing on Enter) or by clicking on it. The hashtag will be inserted, and the cursor placed in the end of the hashtag with the following function:
/*
* The function takes a DOM node and the desired caret position
*/
var setCaretPosition = function(node, position) {
node.focus();
var textNode = node.firstChild;
var range = document.createRange();
var sel = window.getSelection();
range.setStart(textNode, position);
range.setEnd(textNode, position);
sel.removeAllRanges();
sel.addRange(range);
};
Now, here’s my problem. The above function works fine if the user selects the hashtag through keyboard (using arrows and pressing on Enter). But if the user clicks on a hashtag, the hashtag is inserted but the focus is lost from the text edit field.
I stepped through the debugger and verified that the DOM element I am trying to focus on and set the cursor in is the same element in both scenarios. But clicking on a hashtag will nonetheless lose the focus on the edit field. I have absolutely no clue as to why this may be happening. Perhaps you could offer any suggestions?
Update: Hmm, I must have made some mistake in my code, because this simple example I made in Codepen works fine.
After re-reading my code for the umpteenth time, I realized that I was calling stopPropagation, but not preventDefault for the mousedown event on the hashtag when I was clicking on it. So it's not surprising that the focus was lost from my text field. I still find it somewhat puzzling that it was not restored with the code snippet I included in my question, but maybe that’s because I was listening to the mousedown event on the hashtag, and the focus, even if it was restored to the text field for a fraction of time, got lost again.
I am making a terminal window in HTML/JavaScript and am using a textarea for input. I would like to prevent sections of the text in the textarea from being deleted. For example, if I had the text in the textarea "C:\>Random Code" I would like to prevent the user deleting the "C:\>" text. Is this possible using javascript?
Assuming jQuery, this script will listen for keystrokes, and if any of the required text can't be found (ie: user tries to delete it) it will add itself right back in there:
var requiredText = 'C:>';
$('textarea').on('input',function() {
if (String($(this).val()).indexOf(requiredText) == -1) {
$(this).val(requiredText);
}
}
You cannot make a section of textarea uneditable (only the whole control).
You can use various JavaScript trickery (listening to keypress events and cancelling event using event.preventDefault if the user wants to do something that you do not want to allow)
Another solution is to, instead of having an undeletable section of the input, to automatically append (or prepend ) a predefined string to the user input (and conveneintly display it for the user in some way).
Update:
So, my solution would look like this:
var requiredText = 'C:>';
$('textarea').on('keyup',function(event) {
if (GetSelectionStart(this) < requiredText.length){
event.preventDefault();
event.stopPropagation();
}
}
Where GetSelectionStart is a function that tells the beginning of the selected text (or caret position, if no text range is selected). For some possible implementations, see e. g. Caret position in textarea, in characters from the start
This function assumes that requiredText is always at the beginning of the string. But of course, it can be adapted for more complex scenarios.
I don't know what this is called so its hard to google for it.
If you have a plain html input type=text with a small width eg 20 and then type more characters than can be displayed, it shows the last characters you type. And the first ones are scrolled out of view:
This is my long text // this is the whole string
my long string // this is what is actually visible in the input box
How do I make it so that when you hit tab, the view area resets so that the start of the string is visible and the end is hidden?
my long string // this is what is visible in the input box when typing
This is my // this is what is I want to be visible in the input box after you hit tab
What do you call this, and how do you do it?
I don't know if your question has been answered, but I just felt like answering myself. You can do it by using ranges and window selection. Here, I made a JSFiddle for you.
$(document).ready(function(){
$("input").bind("keyup",function(e){
if(e.keyCode==9){
var r=document.createRange(),
gs=getSelection();
r.setStart(this,0);r.setEnd(this,0);
gs.removeAllRanges();gs.addRange(r);
}
});
$("input").bind("blur"),function(){
$(this).focus();
});
});
I have a simple display project and want to cut out the mouse from the equation, the page only has one field (a search field) and I want the browser to be locked into to the field remove the need for a mouse while keeping it user friend for those who don't know how to maneuver without a mouse.
Can it be done with jQuery/Javascript? I don't really know what im search for besides it may have something to do with tab indexing.
Thanks,
Arthur
Since Gaby hasn't edited, I'll go ahead and write up the solution. Some of the credit for the code goes to Gaby and Andy E.
$(document).ready(function(){
var el = $(':text:eq(0)');
el.focus();
el.blur(function(){
setTimeout(function() { el.focus(); },0);
});
});
if you mean that you want the field item to be focused (so that the user can start typing in it right away) then
$(document).ready(function(){
$(':text:eq(0)').focus();
});
this will put the focus inside the first input box it will find in the page..
(the :eq(0) can be omitted if you only have one input box ..)