auto focus the same textbox on blur - javascript

I need to focus the text box which on blur moves to next box. but, if an error is detected it needs to be focused again.
here is my code
<input type="text" id="error_code'" name="errorcode[]" onblur="validate_code(this.id)"/>
function validate_code(id){
var error_code=$("#"+id).val();
if(isNaN(error_code))
{
$('#'+id).val("");
$('#'+id).focus();
}
}
however this id not setting focus to same text box. tnx.
EDIT: Am able to validate and get result. But, my question is on re-focusing the text box if error is returned...

Try something like this.. this works perfectly:
HTML:
<input type="text" id="error_code"/>
Jquery blur function:
$(document).ready(function(){
$("#error_code").blur(function(){
var error_code=$(this).val();
if(isNaN(error_code)) {
$(this).val("");
$(this).focus();
}
});
});

You need to tryout something like this.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="example">
<div>
<input type="text" id="error_code" name="errorcode[]" onblur="validate_code(this.id)"/>
</div>
<script>
function validate_code(id){
var error_code=$("#"+id).val();
if(isNaN(error_code)) {
setTimeout(function() {
$('#'+id).val("");
$('#'+id).focus();
}, 0);
}
}
</script>
</div>
</body>
</html>
In case of jQuery its already tries to set focus to the field. It will block further focus events to the field. To you need to hack it out by something like this.

Related

parsley.js does not work for ckeditor textarea

I wrote code for my form with parsley.js validator, however it works fine except CKEditor textareas. Where can be the problem? Here is screenshot
Here is my code:
<script type="text/javascript">
CKEDITOR.on('instanceReady', function(){
$.each( CKEDITOR.instances, function(instance) {
CKEDITOR.instances[instance].on("change",function(e) {
for ( instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
});
});
});
</script>
<h2 class="heading">Description</h2>
<div class="controls">
<textarea name="description" id="description" required="" data-parsley-errors-container="#description-errors" data-parsley-required-message="Это поле необходимо!"></textarea>
</div>
<div style="margin-bottom: 20px;" id="description-errors"></div>
<script>
CKEDITOR.replace('description');
</script>
<h2 class="heading">Purpose</h2>
<div class="controls">
<textarea name="purpose" id="purpose" required="" data-parsley-errors-container="#purpose-errors" data-parsley-required-message="Это поле необходимо!"></textarea>
<div style="margin-bottom: 20px;" id="purpose-errors"></div><br><br>
<button type="submit" name="submit">Submit</button>
</div>
<script>
CKEDITOR.replace('purpose');
</script>
Your issue is related to the required attribute. After, this line:
CKEDITOR.on('instanceReady', function () {
you need to add such an attribute again, for each text area, because lost during CKEDITOR init phase (i.e.: CKEDITOR.replace('purpose');).
For a specific textarea you can write:
$('#description').attr('required', '');
For all the textareas belonging to the form:
$('form textarea').attr('required', '');
From your comment:
When the error shows in other inputs and when I type something it removes automatically. But in textareas it does not leave
In order to solve this part, on CKEDITOR change event, you need to trigger parsley validation. The below line does the trick:
$('form').parsley().validate();
The updated code (jsfiddle here):
CKEDITOR.on('instanceReady', function () {
$('form textarea').attr('required', '');
$.each(CKEDITOR.instances, function (instance) {
CKEDITOR.instances[instance].on("change", function (e) {
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
$('form').parsley().validate();
}
});
});
});
It's always so much easier to answer questions if you provide a minimal working example...
ckeditor hides the <textarea> and fills it in via Javascript.
Maybe the issue is that the error container is in the wrong place.
It's also very possible that ckeditor doesn't trigger the input event (not very well known). If that's the case, the following code should resolve the issue:
$('textarea').on('change', function() { $(this).trigger('input') })
Please update if this works or not.

Hidding TextBox in html

I have some text boxes in html which takes value from database based upon that value i want to hide that particular text box i.e if the value is null the text box disappear please help.Searched a lot but still confused as i want that function to run automatically so can't use on-click or on-change method. I have function that check for the value weather that value is null or not then i set that value to the text box. Found a method of changing the type of text box but not working.
readonly>
Hide
You could just do this. Im just setting the visibility to hidden to completely hide it.
<!DOCTYPE html>
<html>
<body>
<textarea id="myP">This is a textarea.</textarea>
<button type="button" onclick="myFunction()">Hide content of textarea</button>
<script>
function myFunction() {
document.getElementById("myP").style.visibility = "hidden";
}
</script>
</body>
</html>
Toggle
Now if you want to toggle you just add another function!
<!DOCTYPE html>
<html>
<body>
<textarea id="myP">This is a textarea.</textarea>
<button type="button" onclick="hide()">Hide content of textarea</button>
<button type="button" onclick="show()">Show content of textarea</button>
<script>
function hide() {
document.getElementById("myP").style.visibility = "hidden"
}
function show() {
document.getElementById("myP").style.visibility = "visible"
}
</script>
</body>
</html>

javascript onclick custom cursor

I have been using:
<script>
function change()
{
document.body.style.cursor="url('xx/xx.cur'),auto";
}
</script>
<div onClick="change()"></div>
It works, but its important that the cursor resets while there is no click so i tried the onBlur, but it didnt work.
At last I found this:
<script type="text/javascript">
function change() {
document.body.style.cursor=(document.body.style.cursor=="help") ? "default" : "help";
}
</script>
</head>
<body>
<div onmousedown="change()" onmouseup="change()"> </div>
which works like a charm, but it failed to replace the cursor standard styles with custom .curs.
Here:
function change()
{
document.body.style.cursor=(document.body.style.cursor=="url ('xx/xx3.cur')") ? "url ('xx/xx1.cur')" : "url ('xx/xx3.cur')";
}
</script>
</head>
<body>
<div onmousedown="change()" onmouseup="change()" id="container">
Obviously the double parentheses are troublesome. I tried everything without success. Any help apreciated.
Thanks in advance.
I would probably tackle this problem with some simple css magic instead.
Instead of actually assigning body.style.cursor a value with javascript I would toggle a class on the html-tag which in turn shows the correct cursor.
CSS:
html
{
cursor: default;
}
html.help
{
cursor: url('help.cur');
}
Javascript:
function change()
{
$("html").toggleClass("help")
}
Working jsfiddle: http://jsfiddle.net/BV3kn/2/

Using jQuery focus and blur to show and hide a message

I am clicking to set focus on a textbox, and once I have set focus I am trying to display a simple message. Then on blur that message disappears.
Here is my code: If I click on the textbox it displays the message but if I click the button it doesn't set focus as I thought it would.
<script>
$(document).ready(function(){
$("#clicker").click(function(){
$("#T1").focus(function(){
$("#myFocus").show();
});
});
$("#T1").blur(function(){
$("#myFocus").hide();
});
});
</script>
<body>
<div id="clicker" style="cursor:pointer; border:1px solid black; width:70px;">
Click here!
</div>
<br /><br />
<input id="T1" name="Textbox" type="text" />
<div id="myFocus" style="display: none;">focused!</div>
You need to trigger the focus event, instead of defining it. Try this instead:
<script>
$(function() { // Shorthand for $(document).ready(function() {
$('#clicker').click(function() {
$('#T1').focus(); // Trigger focus
});
$('#T1').focus(function() { // Define focus handler
$('#myFocus').show();
}).blur(function() {
$('#myFocus').hide();
});
});
</script>
The problem is here:
$("#T1").focus(function(){
$("#myFocus").show();
});
You should trigger the event with focus() not attach a callback with focus(function(){...}
Fixed code:
$(document).ready(function(){
$("#clicker").click(function(){
$('#T1').focus();
});
$("#T1").blur(function(){
$("#myFocus").hide();
}) .focus(funcion(){
$("#myFocus").show();
});
});

Hand Cursor is not working in the firefox browser

<html>
<head>
<title>Question</title>
<script type="text/javascript" >
function MouseOverHand(ID)
{
var Cursor='hand';
var ID=ID;
if (!document.all){ Cursor='pointer'; }
document.getElementById(ID).style.cursor=Cursor;
}
</script>
<script type="text/javascript" >
function MouseOverHelp(ID)
{
var Cursor='help';
var ID=ID;
if (!document.all){ Cursor='pointer'; }
document.getElementById(ID).style.cursor=Cursor;
}
</script>
</head>
<body>
<label id="Hand" onmouseover="MouseOverHand('Hand');" > Hand </label><br/><br/>
<label id="Help" onmouseover="MouseOverHelp('Help');" > Help </label>
</body>
</html>
The above html is used to take mouse cursor in the mouse over of labels. Here, "Hand" and "help" cursor is working fine in Internet Explorer, but it's not working in Firefox and other browsers.
you don't need var Cursor if you can specify help or hand directly like so
document.getElementById(ID).style.cursor='hand';
and
document.getElementById(ID).style.cursor='help';
please check working example and take a look at the html source code
Simpler version, works on 'all' browsers:
<script type="text/javascript" >
function MouseOverPointer(obj) //obj is the triggering element
{
if(obj.id=='Help')
obj.style.cursor = "help";
else if(obj.id=='Hand')
obj.style.cursor = "pointer";
}
</script>
<label id="Hand" onmouseover="MouseOverPointer(this);" > Hand </label><br/><br/>
<label id="Help" onmouseover="MouseOverPointer(this);" > Help </label>
"Hand" does not work in Firefox. Try "pointer". "help", however, should work -- try applying the style in a more direct way than via JS.

Categories

Resources