Javascript/Jquery - Reset text box view area after tab - javascript

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();
});
});

Related

Keeping text entered into a textarea visible at all times

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.

How can I add a tag text input system similar to StackOverflows system

Is it possible to just style the text inside the box? The system I had came up with was:
Make a Div that overlays the box
When typing in the box listen for spacebar
When spacebar is pushed, add it to an array, which then adds it to the list of Tags to appear in the div
When the divs width is > than the input box, limit the width to a set size
When adding more tags than the width allows, push new tag to array, scroll the div to the end and hide the overflow of the other tags
Listen for if the text box is empty and backspace is pressed
If pressed, populate the text box with the text of the last element in the array, and splice the last element to remove it.
This is the current method I mean to implement and can code it just fine. But I was wondering if there is a simpler way to do this and more cross browser / version friendly. I tried googling StackOverflows tag system, tags, tagging, and more but it's all really unrelated stuff. Any input would be nice sorry if this is a poor question, I can delete it or vote to close it if necessary. Thanks.
Number 4 can be written like so:
4.When number of divs is > than 5, return "You are only aloud 5 tags"

HTML Textarea, place cursor on bottom line (CSS)?

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.

How to take control/cursor to another text box

I have a page where you enter customer-id first and hit submit. That point it will validate the customer and if valid, comes back to the same page to enter quote number. Initially quotenumber field will be grayed out and can not be edited. My question is, after it comes back to the page, I need the cursor to go to the "quote number" text box instead of customer-id text box (currently it goes to customer-id text box). How can I solve this?
use javascript's focus() function or jQuery
in jquery it would be
$("#myinput").focus();

jQuery/Javascript auto tab index lock/select?

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 ..)

Categories

Resources