javascript input focus - javascript

<form id="commentform" method="post" action="wp-comments-post.php">
<input type="text" aria-required="true" tabindex="1" size="22" value=""
id="author" name="author">
</form>
I set default value "visitor" to the input box. When focus is in text box or mouose enters it, I want to hide "visitor" string and want to show it when it loses focus or mose moves out.

Try using the HTML5 placeholder attribute:
<input type="text" aria-required="true" tabindex="1" size="22"
placeholder="visitor" id="author" name="author">
While browser support is not 100% there yet, this will give you a standard way to achieve what you're trying to achieve, without going through unnecessary hoops.
Another thing you can try is to overlay the input element over some text and make it transparent/translucent when not in focus and opaque when in focus/filled.
As of today, Tumblr's login page uses this trick:
<div class="input_wrapper" id="">
<label for="user_password">Password</label>
<input type="password" id="user_password" name="user[password]" data-validation-type="password" value="">
</div>
Through CSS magic this becomes:

Looks like you are using WordPress, so you have the jQuery library on your site.
You can use my jQuery plugin to achieve this.
Example
jQuery
$('#author').inputLabel({
customLabel: 'Visitor'
});
In this case, I had to specify the label myself, but the plugin works without this by finding the relevant label element to the input, which should be present for accessibility.
jsFiddle.

If you are up to HTML 5 yet then try this:
<script type="text/javascript">
var prompt="visitor";
var txt=document.getElementById("author");
txt.onfocus=function(){txt.value='';}
txt.onblur=function(){
if(txt.value==''){
txt.value=prompt;
}
}
</script>

Ates Goral's answer looks very interesting. please try it first shot. this is an alternative if you do not want to sweat..:)
i would suggest using a watermark plugin. there are many available.
have used this plugin before. worked fine. gives you nice control.
the plugin requires jQuery

Though I too would use jQuery or CSS and a pseudo-class (:focus)....
Here's an easy JS solution that does exactly what you're after. Again, I wouldn't recommend this approach for more than one or two input fields.
<input type="text" value="Visitor" onFocus="this.value='';" onBlur="this.value='Visitor';" id="author"/>

Related

Default value in an input tag at a particular position

I don't know if this is possible or not and hence here's the part. Suppose I have an input tag like the following.
<input id="expiry" name="expiry" type="text" placeholder="MM/YY">
Now what I want is that the user should already see the '/' part, i.e when he types 1212, the textbox should become 12/12 automatically, can it be done if yes , how. Thanks in advance.
For an HTML/CSS-only approach, you could use two inputs, and style them with no borders on the inside edges:
<input type="text" maxlength="2">
<span> / </span>
<input type="text" maxlength="2">
With the input and span elements set to display: inline-block; and some styling of borders, this is a strong, semantic approach with no required Javascript.
Recently I found a plugin that looks nice and I think it does what you're after, so I'm sharing it with you: cleave.js
<input id="expiry" name="expiry" type="text" placeholder="MM/YY">
<script type="text/javascript">
$("#expiry").bind('keyup mouseup', function () {
if($('#expiry').val().length ==2){
$('#expiry').val($('#expiry').val()+'/');
}
});
</script>
check the fiddle
try to use jquery mask plugin :
$(document).ready(function(){
$('#expiry').mask('00/00');
});

How to create auto-input script based on agularJS?

I´m trying to implement a greaskemonkey script to make an auto-input, but I cannot find a way to do it.
What I have:
HTML form:
<form ng-submit="buy(quantity2)">
<input name="quantity" type="text" ng-model="my.quantity" style="width:30px" maxlength="2">
</form>
I simply don´t know how to input a value for the box, usually I would do
$("input[name='quantity']:first").val("1");
Unfortunately val doesn´t exists here. Need a help, thanks!
For your better understand i just give you a example how you can take your value.
HTML form:
<form ng-submit="buy(youravlue)">
<input name="quantity" id="quantity" type="text" ng-model="youravlue" style="width:30px" maxlength="2">
</form>
using ng-submit you can take your value this way.
$scope.buy=function(data){
console.log(data);
}
using ID you can take your value this way.
angular.element("#quantity").val();
In angularjs we have to find the element either by id or querySelector or querySelectorAll and wrap it over angular.element which will provide jqlite(lighter version of jquery)
Refer this https://docs.angularjs.org/api/ng/function/angular.element
angular.element(document.querySelector("input[name='quantity']")).val("1");

Ui mask value not matching ng model

Hi I am using a ui mask to format a phone number in an input box. Problem is the ngmodel is not matching what I see on the screen. For example:
<input type="text" ui-mask="999-999-9999" placeholder="xxx-xxx-xxxx"class="form-control" data-ng-model="search.phone" maxlength="12" >
what i see on screen: 778-673-7892
ng-model value: 7786737892
How do I fix this?
Thanks
This is a little out-of-date, for those looking at the latest ui-mask (1.2, it may be in older versions as well), the official attribute that it's observing is "modelViewValue". Example:
<input type="text" ui-mask="999-999-9999" placeholder="xxx-xxx-xxxx" ng-model="search.phone" model-view-value="true">
This will preserve your model value to include look of the mask.
I know this has been completed, but I don't know if it has been officially released yet. Try doing this:
<input type="text" ui-mask="999-999-9999" placeholder="xxx-xxx-xxxx" class="form-control" data-ng-model="search.phone" maxlength="12" ui-mask-use-viewvalue="true">
If it doesn't work, you can make the changes yourself, you just have to find the file the mask directive is in, and make the changes you see here

Forcing cursor to go on text field

How do I make it so when my web page loads, the cursor automatically goes to a given text field? (For example, on Google when you load the page, the blinking cursor is already on the search box)
You need to use JavaScript. e.g.
<input type="text" id="search" />
<script type="text/javascript">
document.getElementById('search').focus()
</script>
Be careful implementing this functionality. It's very annoying for a user to focus on a field and start typing only to find the caret has been redirected while typing when the page finished loading. I've seen this happen on numerous sites.
I'd suggest using the HTML5 autofocus attribute and falling back to a JavaScript solution in browsers which don't support it. The following gets round the above problem by not waiting for the document to load before setting the focus:
<input type="text" name="search" id="search" autofocus>
<script type="text/javascript">
var input = document.getElementById("search");
if ( !("autofocus" in input) ) {
input.focus();
}
</script>
More information can be found at diveintohtml.org: http://diveintohtml5.ep.io/forms.html#autofocus
Try
<body onLoad="document.form1.txtBox1.focus()">
Since HTML5 is in full force, I believe autofocus is well supported. I would take heed to the other answers here, but in my opinion, much easier than JavaScript:
<input type="text" name="name" autofocus>

jQuery Rotate Plugin

I'm using jQuery Rotate plugin to rotate items. It works, but I experienced some problems.
I have that code:
<input type="text" name="np_angle" id="np_angle" size="2" maxlength="4" value="<?=$userinfo->np_angle?>" onchange="$('#np_drag').rotate(this.value)" />
<div id="np_drag" style="color:<?=$userinfo->np_color?>; font-size:<?=$userinfo->np_size?>px;position:absolute;top:<?=$userinfo->np_y?>px;left:<?=$userinfo->np_x?>px" class="draggable np_drag">
<?=$userinfo->np_text?>
</div>
<script>$("#np_drag").rotate(<?=$userinfo->np_angle?>);</script>
The problem is on input onchange. When I change it, #np_drag don't rotate. But when value is static (e.g. onchange="$('#np_drag').rotate(45)"
It works.
Why? How can I solve my problem?
Select it with an id
... id="my-id" onchange="$('#np_drag').rotate($('#my-id).val())" ...
Additionally, you might want to bind the onchange event via the dom-ready function instead of writing it in the HTML source
In the statement $('#np_drag').rotate(this.value), this will refer to np_drag and I believe you want it to refer to the value of np_angle. Try this:
<input type="text" name="np_angle" id="np_angle" size="2" maxlength="4" value="<?=$userinfo->np_angle?>" />
<script>$('#np_angle').bind('change', function(e){$('#np_drag').rotate($('#np_angle').val())});" </script>

Categories