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>
Related
In the case of input whenever we focus out or click outside the input field we see that the right part of the over text is hidden and only the left part shows but I want the reverse of it.
<input value="abcdefghijklmnopqrstwxyz123456789">
Like in the above input field we can see "abcdefghijklmnopqrstwxyz1" and the rest part("23456789") is hidden but I want to show "klmnopqrstwxyz123456789" (last part instead of the first part) and hide the first part "abcdefghij" without CSS direction.
Via javascript, we can achieve it with the help of blur event.
On blur, we capture the input's current Element.scrollLeft . Next, we reset the scrollLeft position to Element.scrollWidth wrapped in a setTimeout() to ensure the browser waits to render the queued change.
const elem = document.getElementById('data');
elem.addEventListener("blur", () => {
setTimeout(() => {
elem.scrollLeft = elem.scrollWidth;
}, 0);
});
<input id="data" value="abcdefghijklmnopqrstwxyz123456789">
Below piece of code - for dynamically change the length of your text on changing the content
function a (t){
t.size = t.value.length
console.log(t)
}
<input onkeyup="a(this)" value="abcdefghijklmnopqrstwxyz123456789">
I want to know how to make a input text field like the one in facebook or twitter where text smiles are converted into graphics and the ability to add extra markup.
I have gone through other stackoverflow questions like
How do I make an editable DIV look like a text field?
So I know how to make an editable div using contenteditable, thats not what I wanted to know.
I have inspected facebook comment box via chrome and it shows they use an Invisible input box and a div to show the output
I have removed facebook classes and added some my own styles to see the input box
So what i want to know is
How the input can be hidden and the things that user enters shows up in the div
How to make the hidden input field to be selected when the user focus on div
I want to know how to implement this technique with an input[type=text] and div
In General It would be much helpful if adding a hash tag method is explained. Thanks!
You can use keypress event of jQuery for input and you can update any div or hidden input element
$( "#target" ).keypress(function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
}
$(".div").html($(this).val());// you can play with this
$(".input").val($(this).val());
});
For more details visit jquery doc page http://api.jquery.com/keypress/
For css tell me in details what you want to do i will explain it
With Javascript:
//Add this on input
onKeyDown="keyCounter(this,'div id')"
function keyCounter(field,cntfield) {
var fval=field.value;
//this is the div you can play around
document.getElementById('cntfield').innerHTML = fval;
}
I could do this by,
Hiding the input using
Add CSS to make the div look like input field (.falseInput )
When user selects the falseInnput the hidden Input is focused
The JavaScript function is fired when keyup event is used
HTML
<body>
<input id="Input" type="text" name="Input" />
<div class="falseInput"></div>
</body>
CSS
/*to hide the input field use Opacity, if
display:none
is used the input cannot be focused*/
input{opacity: 0; }
.falseInput{
//css to make div look like input feild
// by modifying the :focus also changing styles
}
JavaScript
//This example is used inorder to add extra markup for makinng a hashtags
document.getElementById("Input").addEventListner("keyup", process, false);
document.querySelector(".falseInput").addEventListner("click", function(e){
document.getElementById("Input").focus();
}, false);
function process(e){
//for processing hashtags
var tag = { hash: 51, space:32 }
, hashtags = false
,input_feild = document.querySelector(".falseInput");
switch (e.which) {
case tag.hashtag:
if(e.shiftKey === true && e.keyCode == tag.hash){
input_field.appendChild(this.value + "<span class='highlight'>");
}
hashtags = true;
break;
case tag.space:
if(hashtags) {
input_field.appendChild(this.value + "</span>");
hashtags = false;
}
break;
}
}
I have a bunch of textfields which identical starting data, the first 2 dozen characters are all the same for every input.
The end is different.
How do I get the textfield to scroll right automatically to show the end by default?
#el toni has a great solution. However, the textfield won't function properly if the user is required to input any text. (The cursor will jump to the left.)
<input dir="rtl" value="https://stackoverflow.com/questions/1962168/scroll-to-the-very-right-of-a-long-text-input">
(*Above from "Scroll" to the very right of a long text input courtesy #el toni)
You could use some js so that when the user clicks on the field, the "right direction" for text input is re-established. Then change it back to the other direction after he/she clicks off.
$("#longInput").focus(function () {
$(this).attr('dir', 'ltr');
});
$("#longInput").blur(function () {
$(this).attr('dir', 'rtl');
});
http://jsfiddle.net/kjjL2/
You can try with the scrollTo javascript function:
var myTextfield = document.getElementById("myTextfield");
myTextfield.scrollTop = myTextfield.scrollHeight;
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');
}
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