How do I use JavaScript to create a text box mask? - javascript

I am very new to JavaScript. I want to add the same effect as that given in the text fields of this webpage in my own page... Can any one help me with how to do it or where to learn it from.
I want my text fields to show what have to be written there but it will change as soon as I write something in it..
Another thing is that a small popup block will appear when I click on a textbox which describes what and how to write in it... like password should be alpha numeric... or more than 6 character long ect.

If you want to do this in an accessible way (and you should):
If JS is available, position a transparent input over a label inside a container and toggle the transparency of the input based on its value at document load time and whenever the focus enters of leaves the element.
I've produced a minimal example.
As for the second part of the question. That's very similar. Just have another label beside the input, and toggle its visibility when the focus enters or leaves, ignoring the value of the input. I wouldn't bother with this though, advance notice of requirements is nice!

You might want to take a look at the WMD markdown editor:
http://wmd-editor.com/
This does exactly what you're looking for.

Look at jquery:
$('#textarea').onKeyup(
function(){
$('div#mydiv').innerHTML( $(this).val() );
}
);
Thats a start. :)

HTML Input field
<input type="text" name="name" id="name" value="" />
Javascript
function hint () {
var elem = document.getElementById('name'); // get element
elem.value = "Enter Name"; // fill element with value
elem.onfocus = function () { // if the user focuses
if (elem.value === "Enter Name") { // if there is default text
elem.value = ""; // clear it
}
}
elem.onblur = function () { // if user removes focus on field
if (elem.value === "") { // if the field is empty
elem.value= "Enter Name"; // fill in a default value
}
}
}
window.onload = hint; // call the function when the page has loaded

Related

Event handler keypress loading at beginning of page instead of on input

I have an HTML input box and want to use jQuery to get the value of user input as it is entered, however the DOM seems to be activated upon page load and it never takes the value of the input box as the user types it in. I'm new to this and can't figure out what I'm doing incorrectly, any ideas would be appreciated!
<input id="textFilter" type="text">
function addEventHandlerForSearch() { //Javascript Handler
$('#textFilter').val();
$('#searchText').text($('#textFilter').val());
let searchVal = $('#searchText').text();
$(document).ready(function() { // DOM
$('#textFilter').keypress(addEventHandlerForSearch());
loadSavedRunkeeperTweets().then(parseTweets);
});
Simple vanilla implementation to get the value of the text box as it is typed would be:
const input = document.getElementById('textFilter');
input.onkeyup = () => {
console.log(input.value)
}
Then you could do whatever you need to with that data. If jquery is a requirement, I apologize for not including that in my answer. Not my area of expertise lol.

Control Cursor Location on Focus in Form Field

I have a form with 4 fields. I want the first of the four to have the autofocus and be the first the user fills out. But then, either by tab or mouse or whatever, when the user gets to second field, I want the cursor to end up at the end of the string to start. There is a pre-filled string in that field.
I'm using Django so I have a form widget controlling the attributes. I can get the string to show up and even get the cursor to the end, but this always causes autofocus as well on that second field. I haven't managed to get both.
Here is code I'm using so far:
Django
field = forms.URLField(
widget = forms.URLInput(
attrs = {
'placeholder': 'enter field',
# call to javascript function - this works
'onfocus': 'add_string("field_id", "string")',
}
)
)
JavaScript:
// add string to element
function add_string(id, string) {
var input = document.getElementById(id);
input.value = string;
}
I've played around with various JS scripts but to no avail. I then found setSelectionRange and played around with this like so:
input.setSelectionRange(7, 7)
Where 7 would be end of the particular "string" in the onfocus JavaScript function call, but I could't get this to work...
Finally, I played around with some jQuery that looked like this:
// focus after string, no highlight
$(document).ready(function() {
var $field = $("#field_id");
var old_val = $field.val();
$field.focus().val('').val(old_val);
});
But this did the same thing: brought initial focus to second field and brought cursor to the end.
Any idea how I can do this, get both autofocus on field one but get cursor to jump to end of pre-filled string of field two on it's focus? Might be a nice trick if I knew how to do it.
You're almost there, you just need to fire your code when your form field is focused, instead of on document ready. In my tests it was necessary to add a zero timeout, because otherwise the field value remains selected:
$(document).ready(function() {
var $field = $("#field_id");
$field.on('focus', function() {
setTimeout(function() {
var old_val = $field.val();
$field.val('').val(old_val);
}, 0);
});
});
JSFiddle demo

How to lock the first word of a textarea?

Basically I need to create a textarea that is character limited, but will have a single word at the beginning, that they can't change.
It needs to be a part of the textarea, but I don't want users to be able to remove it or edit it.
I was thinking I could create a JQuery function using blur() to prevent the user from backspacing, but I also need to prevent them from selecting that word and deleting it.
UPDATE
I wrote this JQuery which seems to work great! However I like the solution below as it requires no Javascript.
<script type="text/javascript">
var $el = $("textarea#message_create_body");
$el.data('oldVal', $el.val());
$el.bind('keydown keyup keypress', function () {
var header = "Header: ";
var $this = $(this);
$this.data('newVal', $this.val());
var newValue = $this.data("newVal");
var oldValue = $this.data("oldVal");
// Check to make sure header not removed
if (!(newValue.substr(0, header.length) === header)) {
$(this).val(oldValue);
} else {
$(this).data('oldVal', $(this).val());
}
});
</script>
If you just want the textarea to show a prefix, you can use a label, change the position, and indent the textarea content. User will not notice the difference.
You can see how it works here: http://jsfiddle.net/FLEA3/.
How about just putting this word as a label next to the textbox? It may be confusing for the users not to be able to edit part of the text in the textbox.
Wouldn't it be better if you just alert the user that whatever he inputs in the textarea will be submitted with a "prefix" and then
show the prefix as a label before the textarea
add the prefix to the inputted text before submitting

Input box that converts text to buttons

I am trying to create a text input field that converts the input text to a "button" onblur. For example in the hotmail "new email page" when you enter email addresses it will make it into a little button-like object with a delete button when you enter a delimiter (semi-colon or comma). Anyone know how to do this?
I did a sort of workaround thing to what i want where i have a div with a border. In the div there is an input field with the borer invisible and a hidden button. I have a js function that takes the input value and makes the button visible with the value but this is not exactly what im looking for..
actually i just realised stackoverflow does this as well when im adding tags to the post
This is a multiple value field. Give a look at this one.
The feature is not so complex. It's an HTML list, and each value that you choose is converted into a LI node and appended to that list. The input field is inside the last LI, so its cursor can always be after the last choice. Besides, the input value is assigned to a hidden input, which can be used on the server-side as a comma-separated value.
Here's a simple way to fake it (and it looks like this is similar to what SO does for tags):
Create your text <input>, and make sure that its border and outline are both set to none.
Create a container for your tags (or buttons, or whatever) and put it next to the <input>.
Monitor the keydown event on the <input>; when the user tries to enter a "break" character (such as a semi-colon or comma), create the button, add it to the container, empty the <input>'s value, and prevent default (so that the "break" character isn't inserted into the tag, or left in the <input>).
That's the basic idea. Once you've done that, you can add event listeners/handlers to the buttons, or style them any which you'd like, etc.
Here's the simple example I cooked up:
var inp = document.getElementById('yourInput'),
tags = document.getElementById('yourContainer'),
breaks = {
186: 1, // semi-colon
188: 1 // comma
};
function createTag(txt) {
var elem = document.createElement('span');
txt = document.createTextNode(txt);
elem.appendChild(txt);
elem.className = 'tag';
tags.appendChild(elem);
}
function monitorText(e) {
e = e || window.event;
e = e.keyCode;
if (breaks[e]) {
e = inp.value;
inp.value = '';
createTag(e);
return false;
}
}
inp.focus();
inp.onkeydown = monitorText;

How do you have grayed out text in a textfield that dissapears when the user clicks on it

In HTML & JS, how do you make a textfield that has grayed out text telling the user what the field is for that goes away when the user clicks on the field?
For example, in firefox the search field in the top right hand side says which search engine it uses when there's nothing entered, then once you click it's an empty textfield, but if you leave it blank and remove focus from the textfield then the grayed out text is back again.
Is there a name for this behavior? Also, is it possible to do in pure css without the use of js to do the on focus / on blur events?
The effect that you are referring to is often called the placeholder effect. Within HTML5 this effect is possible within certain browsers by simply placing the new attribute 'placeholder' within your input tag. Such as...
<input type='text' placeholder='Place Holder Text'/>
<input type='text'/> <!-- Example with no title-->
<input type='text' title='Your title'/>
This can also be done in JavaScript using CSS by setting a style for an active class and toggling the active style along with the item's title tag. Such as ...
$(document).ready(function(){
// Select all input fields. (You will probably want to filter this down even further).
var inputs = $('input[type=text]');
// Set all the inputs to the title value.
inputs.each(function(){
$(this).val($(this).attr('title')).addClass('unfocused'); // Styling Class for inputs.
});
// When the user focuses on an input
inputs.focus(function(){
var input = $(this);
if(input.val() == input.attr('title')){
$(this).removeClass('unfocused').val('');
}
});
// When the user loses focus on an input
inputs.blur(function(){
var input = $(this);
if(input.val() == ''){ // User has not placed text
input.val(input.attr('title')).addClass('unfocused');
}
});
});
The tested function can be seen here: http://www.jsfiddle.net/F8ZCW/5/
This behavior is on my URL shortener site: http://relk.in
The basic idea is when the onfocus event fires, you modify the CSS of the textfield to a normal class, and then onblur, you re-apply the previous class.
And no, you cannot do this in pure CSS.
Example:
var textfield = document.getElementById('someTextField');
textfield.onfocus = function() {
this.className = this.className.replace('oldClassName', 'newClassName');
};
textfield.onblur = function() {
this.className = this.className.replace('newClassName', 'oldClassName');
}

Categories