Focus disables mouse click - javascript

I have some text-areas in a web page and I have used the below code snippet to focus on textarea which was required as textarea was not allowing to enter text in itself. But using below code not allowing user to click and add text any where in between already entered text. User is only able to go through the arrow keys but not using the mouse. Do we have any hack to fix it?
$('textarea').on('click',
function () {
$(this).focus();
});

Could you only call focus if the textarea is empty?

Related

Client side form validation for Copy/Pastes via Right-Click

I'm using the following line (Struts1 syntax) to display a text field and allow some client side checks via Javascript.
<html:text styleId="myField" property="myProperty" onkeyup="function()" />
My intention is for a message to appear and a dropdown to disable whenever there is text entered into the form field (regardless of content). The onkeyup attribute works fine for all cases except for when the user pastes in text using mouse right-click.
It doesn't appear that onmousedown and onmouseup events notice right clicks. The same goes for onfocus.
onchange only makes the check when focus is lost, however the user can circumvent this by pasting data and clicking the form submit (same for onblur).
onmouseout somewhat works (I can break functionality) in IE8, but doesn't work at all in Chrome v41.0.2272.89
Has anyone encountered client-side form checks on Mouse-Right Click? I'd like to cover this use case across browsers and cannot count on the end user to always paste via keyboard shortcuts.
I went with a jQuery solution as suggested by Aleksandr M above in comments.
Initially I had this function:
$(document).ready(function(){
$('#myField').bind("paste",function(e) {
toggleFunction(); //preserve already existing function in use with other cases
});
});
But then came to find that while the function would run following the user's paste, it would run prior to the text actually being pasted.
Example:
User pastes (Right-click > paste OR Ctrl+V);
Function is called and executes, condition checks made
Text is pasted.
So instead I replaced the function call in the jQuery with my intended end result, making some additional changes elsewhere so that my assumptions are met.
But those conditions aside, the below ends up doing what I needed.
$(document).ready(function(){
$('#myField').bind("paste",function(e) {
document.getElementById("dropdownID").disabled = true;
document.getElementById("showMessage").style.visibility = "visible";
});
});

detect on change of text box in jquery

I am having a little confusion in jquery regarding an onchange event of a text box. I am having a text box and a small jquery snippet to detect if the user has pasted something:
$("#testid").bind("paste",function(){ do something.})
Is there any function like paste which detects whenever there is a change in the text box? i.e, when a user inputs something, immediately call a function (not on submit), and do something. Any help is appreciated
Use .change function.
$("#testid").change(function(){
//do something.
});
This works, if
user pastes something
user types
user deletes text
into/from the textbox. Globally, when textbox's value changes.
Jquery Documentation
You can use this. also check JSFiddle attached.
$("#txtBox").on('change', function(e){
alert('txtBox has changed: ' + $(this).val());
});
http://jsfiddle.net/AUSd6/
If you using latest jquery library, below script can be helpfull
$( "#testid" ).on( "change", function() {
//do something.
});
For Detail visit http://api.jquery.com/on/
Following are 3 methods those are very helpful if you have to detect changes as soon as user presses keys on keyboard. Keydown,Keypress,Keyup
Keydown--> would be called when your keyboard key is down.
Keyup --> called when user leaves the key after typing the character.
keypress--> is called as soon as user press the key on the keyboard.
There is change method also but this is called when someone after typing the word in textbox or any field clicks any place on the page or moves to next input field.
here is code how to use them.
$("#yourcontrolId").keyup(function(){
});
similarly you can use others 2 as well. every function have two overloaded versions

Android keyboard keeps appearing after closed

I have a textarea in my html. When the user taps on it, the keyboard properly pops up. After hitting the keyboard close button, the keyboard keeps appearing when tapping elsewhere on the screen. Is there a way to have keyboard only appear on input taps?
The following bit of jquery code does the trick:
$(window).bind('touchstart', function (e) {
if (!$(e.target).is(':input')) {
$(':input').blur();
}
});
Basically, I catch every tap; if the target is not an input field, blur all the input fields, which in effect hides the silly keyboard.

Javascript: change event getting fired when input field loses focus

I have input fields on my page and I detect when the user types something to enable the Save button. I also have enabled a shortcut Ctrl + S to let the user save. Whenenever data is saved, the Save button is disabled.
However I have a dilemma. If the user changes the text in an input field, does a Ctrl + S and then moves to another input field using the mouse, the "change" event gets fired for the input field that the user changed and this in turn causes the Save button to get enabled again. The Save button should not be enabled because no changes have taken place after doing a Ctrl + S. What it appears is that the change event is fired not just with changes in text but also when the focus is moved to another field.
$("input.SaveMe").live('keypress change', function ()
{
// Code goes here to enable Save button
});
How can I prevent the change event from taking place after saving. I thought of using some kind of flag but I can't figure out how.
You can ignore the event when that particular input is not in focus, in the following manner.
$("input.SaveMe").live('keypress change', function() {
if (!$(document.activeElement).id == 'id_of_input') return; //if (!$(document.activeElement).hasClass('SaveMe')) return;
// Code goes here to enable Save button
});
Removing the detection for "change" takes care of the problem but this now prevents users from pasting text into a field and detecting the paste as a change. To fix that use:
$(document).bind('paste', function (e)
{
// Add code to update flag to indicate data changes and enable the Save button.
});

Run javascript/jquery after text change but before submit

I have an input element on a form along with a submit button.
I want to run the change event on the input element all whenever a change occurs. The problem is if end user changes text and clicks submit button the code in the change event doesn't run.
Immediately after user clicks the submit button, the form submits (like the change is not getting time to run, the same occurs with blur or focus out).
My controls can be placed on any form, and I do not control the click event of the button.
Help please
If you're wanting to catch whenever input in a textbox is changed try this in the document.ready
$("input[type='text']").change( function() {
$("#SubmitButton").attr('disabled', 'disabled');
// check input ($(this).val()) for validity here
// after text is updated..etc, enable the button
$("#SubmitButton").removeAttr('disabled');
});
may be you want use event.preventDefault
Expanding on #Aleks G's comment, the best thing for you to do is trigger your change handling on more than just the change event. Beyond keyup, I've found you also need to be careful to handle pasting with the mouse (doesn't trigger the keyup or change event):
yourInput.bind('change keyup paste', function() {
// Your code
});

Categories