I'm trying to bring the typing cursor to beginning of the input text by this code with no success. What is the issue?
HTML
<input value="text"/>
JavaScript(jQuery)
$('input').focus(function(){
$(this).delay(100).trigger(jQuery.Event("keydown",{keyCode: 36, which: 36}));
});
Live at JSBin
This looks like a case of over thinking a problem OR you did not describe it properly. The default behavior of focus is to place the cursor at the beginning of text. Just do this:
$(function() {
$('input').delay(100).trigger('focus');
});
Not sure why you need the delay. Using the jQuery ready event as shown you can elimintate the delay.
So, the problem is not really pressing home but moving cursor to beginning of the texbox I assune.
Checking this answer: move cursor to the beginning of the input field?
Generally the approach is right, but it doesn't seem to work directly
I have modified it to fit your jQuery on focus case:
$('input').focus(function(){
var input = this;
// for some reason, putting directly doesn't work
setTimeout(function() {
if (input.createTextRange) {
var part = input.createTextRange();
part.moveat("character", 0);
part.moveEnd("character", 0);
part.select();
}
else if (input.setSelectionRange){
input.setSelectionRange(0,0);
}
}, 0);
});
Live example:
http://jsfiddle.net/sF334/
If you want to trigger the focus itself, then you can do it as:
$('input').trigger('focus');
// use some unique selector instead in real example, like ID
Note it returns to before the first character on focus, but allows you to move and change selection later as you wish, as soon as you change focus and come back, it'll return to initial position again.
Related
I am using EasyAutocomplete, it works well, only problem I am facing - Input box loses control when EasyAutocomplete is attached to it.
I want EasyAutocomplete to get activated after the user has typed 2 characters.
When I type 1 character nothing happens as needed, but after 2nd character has been typed EasyAutocomplete must get attached and should start working. However, what happens is I have to click outside of the input box to make things happen.
It is just this 'outside click', that I have to do to make this plugin work, is problematic for me.
I have tried input event as well but i did not work as required.
The change event seems quite suited for my requirement.
How do I solve this issue?
var ib = $("#inputbox");
$(document).on("keyup", ib,function(e) {
leng = ib.val();
});
$(document).on("change", ib,function(e) {
if(leng.length < 2){
#do something
}else{
ib.easyAutocomplete(options);
}
});
First you should change "change" by "keyup"
Second leng doesn't update as you put it outside of the event
Lastly an event on document may not be the best if you want this event to trigger only on this element, change document by your element
$("#inputbox").on("keyup", ib,function(e) {
if($("#inputbox").val().length < 2){
#do something
}else{
ib.easyAutocomplete(options);
}
});
I have a page with an empty text input, an empty span and the following code:
$('input').on('input', function(){
$('span').text(this.value);
});
When I type in the input the same text appears in the span. But when I go to another page in the same browser tab and then go back again, the input field is still filled in, but now the span is empty.
How can I make it so that when you go back to the page the span keeps the value of the input?
Thanks!
Edit:
I think I've found the solution.
$('input').on('input', function(){
$('span').text(this.value);
}).not(function(){
return this.value == '';
}).trigger('input');
The behavior you are experiencing is normal if you are returning to the page by hitting the "back" button or browsing from your local hard drive - - you are seeing the cached version of the page in that case. Form fields can cache their values, but a span doesn't have a "value" per se, it has content and that content isn't cached.
If you were to return to the page by clicking a link or typing an address (things that cause an HTTP request), the text field will not show the last value from the previous time, it will show its default value.
In addition to the code you already have, you just need a script that fires off as soon as the page is ready that resets the span to the value of the input.
// You must already have a document.ready event handler, so just add to that:
$(function(){
// This will restore the span's content to the value of the textbox
$('span').text($('input').val());
// This is your original code that wires up the textbox to a click
// event handler
$('input').on('input', function(){
$('span').text(this.value);
});
});
I tend to bind window.popstate();
$(window).on("popstate", function (e) {
//code to refill the span goes here.
});
I use it to deserialize a potentially changed querystring, but you could likely use it here to the same effect.
Right now I'm using a bit of jQuery to hide the iPad keyboard when an input loses focus.
jQuery(function($) {
$(document).on('touchend', function(e) {
document.activeElement.blur();
});
});
However during a process like the checkout when a user clicks from input to input the keyboard disappears and the reappears every time the input is changed. Is there any way to change the above jquery code to where it only blurs the active element if the place on the document that is touched does NOT have an input type of text?
Well, I haven't tried this with iPad before, so I'm not sure that it will work, but you can check the type of document.activeElement to determine if it is a text or textarea field. If it isn't, then perform your blur(). The code would be like this:
jQuery(function($) {
$(document).on('touchend', function(e) {
setTimeout(function() {
var currentElement = document.activeElement;
if ($(currentElement).not("textarea, :text").length > 0) {
currentElement.blur();
}
}, 100);
});
});
The setTimeout is needed to make sure that the focus has transferred to the next element, before checking what the current element is (doing it immediately, will return the <body> as the activeElement).
This general approach (i.e., identifying what type the current activeElement is) works in a desktop browser environment, and it SHOULD work on an iPad, but, like I said earlier, I've not had a chance to test it there, so this is more of a "possible solution" than an actual "answer", until you give it a try and se if it works for you. :D
So I have this very simple JS function that selects all the text in the ASP.NET texbox (input):
function selectAllText(textbox) {
textbox.focus();
textbox.select();
}
..and it gets called like this on the click event:
$("#<%=Textbox1.ClientID %>").click(function () { selectAllText(jQuery(this)) });
The problem is no matter how many times a user clicks in the text box all of the text is always selected. I understand why this is occuring (based on the way my code above is), but it doesn't work well when the user tries to click in the middle of a word to get the cursor back to make a modification to the text.
How do I modify this JS to tell if the text is already highlighted and then deselect the text? This was on subsiquient click, the user can get the single cursor on a precise clicked location to make a modification.
I am trying to get the documentation on the .select() method to see if I could do if(!textbox.select()), but I am having a hard time finding it, so post any doc links as well if you have them.
EDIT: This problem and need for a workaround seems to be for IE (I am using IE9). In Chrome the behavior by default is what I need, but this is for an intranet application that runs on IE, so it appears I need an explicit workaround.
Thanks!
Is it necessary to do the .focus() in this function? You could instead attach a simple .select(); to the onfocus event (.bind('focus', function(){..})): http://jsfiddle.net/EGHzj/
Try this
$(document).ready(function(){
$('input').bind('click',function(){
if($(this).hasClass('selected')){
$(this).toggleClass('selected');
}else{
this.focus();
this.select();
$(this).toggleClass('selected');
}
});
});
This should work in IE also,
http://jsfiddle.net/rAqgw/7/
function selectAllText(textbox) {
// if there isn't selected text.
if (textbox[0].selectionEnd) {
textbox.focus();
textbox.select();
}
}
$('#txt').click(function() {
selectAllText($(this));
});
Live DEMO
There is only one text field on a HTML form. Users input some text, press Enter, submit the form, and the form is reloaded. The main use is barcode reading. I use the following code to set the focus to the text field:
<script language="javascript">
<!--
document.getElementById("#{id}").focus()
//-->
</script>
It works most of the time (if nobody touches the screen/mouse/keyboard).
However, when the user click somewhere outside the field within the browser window (the white empty space), the cursor is gone. One a single field HTML form, how can I prevent the cursor from getting lost? Or, how to re-focus the cursor inside the field after the cursor is lost? thx!
Darin's answer is right, but doesn't work in Firefox. If you want to steal focus back in Firefox too, you have to delay it until after the event:
<input onblur="var that= this; setTimeout(function() { that.focus(); }, 0);">
Or, better, assigned from JavaScript:
<script type="text/javascript">
var element= document.getElementById('foo');
element.focus();
element.onblur= function() {
setTimeout(function() {
element.focus();
}, 0);
};
</script>
But, I would strongly advise you not to do this. Clicking outside a text box to remove focus from that text box is perfectly normal browser behaviour, which can be of legitimate use (eg. to set search point for ctrl-F, or start a drag-selection, etc). There's very unlikely to be a good reason to mess with this expected behaviour.
<input type="text" name="barcode" onblur="this.focus();" />
You can hook the blur event and refocus the field again. There are very few use cases for doing this, but it sounds like yours may be one of them. Note that you'll probably have to schedule the re-focus via setTimeout or similar, you won't be able to do it within the blur handler itself.
When doing this without affecting the markup, this is easiest if you use a library like Prototype, jQuery, Closure, etc., but you can do it without them (of course), you just have to handle browser differences yourself. For instance, using Prototype:
document.observe("dom:loaded", function() {
var elm = $('thingy');
elm.focus();
elm.observe('blur', function() {
refocus.defer(elm);
});
function refocus(elm) {
elm.focus();
}
});
If you don't mind affecting the markup, you can use the onblur attribute. For instance, this works on IE, Firefox, and Chrome at least (probably others):
HTML:
<input type='text' id='thingy' onblur="refocus(this);">
Script:
function refocus(elm) {
setTimeout(go, 0);
function go() {
elm.focus();
}
}