We Keep Coding

Create a select tag by comparing the input in html form

I am trying to achieve this:
In an html form, a text input is required. If the text input = "abc", then select tag is added to the page to create a related dropdown menu. However if it is anything else, there is no dropdown menu or it is disabled.
I can't find or think of a way of doing this with jQuery. Is there an event which compares input string that can be used with $("#equipment").on("???", function()? Thanks.
I'm very new to javascript and jQuery so sorry for such a basic question.

You'd use the input event for the text input, and then hide or show a select element based on the value, something like
$('#some_text_input').on('input', function() {
if ( this.value === 'abc' ) {
$('#some_select').show();
} else {
$('#some_select').hide();
}
});

HTML terminal like text input

I am trying to have a form field (just a normal html text input box) which can be typed in and have the value changed but renders the text as invisible.
I need the box to be visible so visibility: hidden; or display: none; won't do the trick.
I can't just make the text the same color as the background because the background is not a single color. I need the text to be invisible while the rest of the input remains visible.
The effect I am trying to achieve is like when you type a password in the terminal and it accepts input but shows no feedback (this is not for a password though).

I can't just make the text the same color as the background because the background is not a single color.
What about a transparent color?
Does this help?
input[type="text"] {
color: transparent;
}
JSBin Demo #1
Update:
I implemented #Shomz idea, You can simply keep the cursor at the beginning or change all the characters to *. I've used jQuery to bind event:
jQuery Version:
var holder = [], exceptions = [13];
var hideChar = function(elm) {
elm.value = '';
// Or
// elm.value = elm.value.replace(/[^*]/, '*');
};
$('#console').keydown(function(e) {
if (e.which === 8) {
holder.pop();
}
}).keypress(function(e) {
if ($.inArray(e.which, exceptions) === -1) {
holder.push(String.fromCharCode(e.which));
}
var _this = this;
setTimeout(function() {
hideChar(_this);
}, 1);
}).keyup(function() {
$('#holder').val(holder.join(''));
});
HTML:
<input id="console" type="text" value="">
<input id="holder" type="hidden">
JSBin Demo #2
Pure JavaScript version? Sure!
That's a long story, check the demo.
JSBin Demo #3

If you want to keep the cursor at the beginning of the field all the time (not showing blank spaces when user types something), you can use JavaScript to send the input characters into another input field with its type set to hidden, while clearing up the original input field at the same time. You need the keyUp listener for that.
And if you want to stick to HTML/CSS, I'm afraid the only way is to set the text color the same as the background color, but then the cursor will move and you'll see those blank spaces I mentined above (see #Hashem's answer).

Have you tried setting the color of the input field to transparent?
<input style="color:transparent;"></input>

Formatting text in dynamicaly created textboxes

I have jquery that generates textareas with different id's. Now i need to make some buttons that will format text inside that textareas. For example: when user clicks in certain textarea, enter text, and click "bold" button, only text inside of that textarea will become bold (in other will be normal). I did manage to make something like this with JS, but it was too primitive (text was formated in all of textboxes) :(
Here is some sample code for this:
<button id="bold">B</button>
<textarea id="ta_1">Some test text</textarea>
<textarea id="ta_2">Some test text</textarea>
What i want to say: one button, multiply text boxes. Entering text in ta_1 and clicking bold, should bold only text in that txtarea. Additional info: all id's starting with same word, just different number at the end.
I feel there is some simple solution, just cant figure it out :D

Actually this is a really bad practice, but you can do that like this,
var activeEl;
$("textarea").focus(function() {
activeEl = $(this);
});
$("#bold").click(function() {
$("textarea").css("font-weight", "");
activeEl.css("font-weight","bold");
});
​
​
DEMO
UPDATE-1: I don't know why you are trying to do this, but I suggest to you use a WYSIWYG Editor like elRTE
UPDATE-2 : You can costomize your toolbar in elRTE, if you want your editor has just a "bold" button, yes you can do that,
$(document).ready(function() {
elRTE.prototype.options.panels.web2pyPanel = ['bold'];
elRTE.prototype.options.toolbars.web2pyToolbar = ['web2pyPanel'];
var opts = {
toolbar: 'web2pyToolbar',
}
var rte = $('#our-element').elrte(opts);
});​
DEMO FOR elRTE

I'm not sure this is a great idea for user functionality, but it can be done. You'll just need to record the "active textarea" somwhere. I would suggest using .data(). jsFiddle
//disable the button until we have a target textarea to avoid confusion
$('#bold').attr('disabled','disabled');
//Record a new 'activeElement' each time user focuses a textarea
$('textarea').focus(function(e){
$('#bold').data('activeElement',e.target)
.removeAttr('disabled');//this first time we will enable the bold button
});
//retrieve the stored 'activeElement' and do something to it
$('#bold').click(function(){
var activeElement = $('#bold').data('activeElement');
$(activeElement).css('font-weight','bold');
});
Most people expect a "text formatting" button to work on their selection. Selections and ranges are out of the perview of jQuery and quite complicated to work with. As has been suggested already, I would advise using one of the many wonderful WYSIWYGs like tinyMCE.

Use document.activeElement
var activeEl;
$('#bold').mousedown(function()
{
activeEl = document.activeElement
});
$("#bold").click(function() {
//check activeElement
if(......){
activeEl .css("font-weight","bold");
}
});
Don't forget check that activeElement exactly textarea

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

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');
}