Having "fake" text inputs with various spans/divs inside the perceived text input is all the rage these days. Look at Stackoverflow. To Tag this question here, I am going to type h-t-m-l-<space> and it will turn that into a token/filter/tag. This is pretty easy to do, put outer div with a border to look like a text input, hide borders for real text input and send click/focus events from the div to the text input. Boom, you're done. Example
I have a need to have the static text go after the input and I need this to be multiple lines. I'm pretty sure I could get the text input example above to have the static text after the input with minor massaging. But going multiline seems to be really hard. If you go multiline, you have to use textareas (is this always true?). Here's an image of what I want:
The whole area looks like a textarea to the user. (The background color is just to help explain the question). Imagine no green text initially, the red text is there though. The user clicks anywhere inside the black border and his cursor goes to the upper right, like a normal empty textarea. Then he types, and the red text just keeps moving along. If the user clicks on, say, 'appending', his cursor goes right after the last green period, not in the word 'appending'. The cursor can only ever be in the green section.
If you extend the solution for the single line text input to this, you would say that green would be a text area, the red would be a div, and the black border would be a container div. But all divs have to be retangular (i think). This is my naive attempt with a similar solution as above. But there are numerous problems with this. How can the first line of the red start in the middle, and then the second line be flush on the left? Here's what's on the jsfiddle:
div{
width:200px;
border:1px solid #000;
}
textarea{
border:none;
font-size:12px;
}
label{
cursor:text;
font-size:12px;
}
<div>
<textarea id="textarea">this is what the user entered</textarea>
<br>
<label for="textarea">This is my constant text</label>
</div>
I'm going to have the red populated dynamically with javascript, but for the purpose of this question, I think it's save to consider just static, constant html.
Is this solvable?
1) Create the textarea
2) Store your static text inside a variable.
3) Populate your textarea with the static text variable
4) When the user starts writing in the textarea(ie: onkeydown event, mouse event..), erase your static content. Store dynamic content in a new variable and keep updating it as user keeps typing. Meanwhile in the textarea, append static text after dynamic content only after user stops typing(ie: onkeyup event). Keep repeating this process.
Calculations:
Dynamic Text = Length of textarea's total text - Length of static text
Related
Basically I have a div that acts as a text holder and I want to change the text and "scale the text in" when I click on different links, that will replace the old text with new text in the div.
What is the best way to achieve this? I want the text to start at scale(1.5) and scale down to scale(1.0) over a period of time EACH time a new link is clicked. I have been attempting to set some CSS for the text, but to no avail.
can only use Mootools here!
Okay so I have a basic input box:
<input id='input_box' value='Name' class="validate['required']" />
The class is for MooTools floor validation.
So what I have in mind is this:
1) The input box has the text of the value inside.
2) When the user clicks on the input box, the left side of the box slides inwards (left to right), so it now shows:
Name [inputbox]
3) If the user clicks out of the box area without typing anything, then it slides back to its original position with Name inside the box area.
I was thinking of doing it this way:
Have the text positioned behind the input box, onlick animate the size of the box, then fade in the text in the position. However, my Mootools knowledge is really bad, maybe something like this (as a starting point)?
function introFunction() {
var input = new Fx.Style($('input_box'),'width':'200');
input.start(200);
}
Then apply that to onlick, but it doesnt work :/
I gave it a try. http://jsfiddle.net/fJjTN/1/
I used tween instead of Fx. Instead of doing the effect on the input field, I did it on the label.
Edit after feedback in comments
http://jsfiddle.net/47CAH/1/
I have a simple textarea and I need to make transparent letters while allowing the text-caret to be visible. When I apply the following rules then I get invisible caret:
textarea {
background: transparent;
opacity: 0;
}
When I type invisible text, I need to see the text-caret move.
EDIT: I need to make editor to edit td cell in table. When I click on a cell I show a textarea and start typing. On a each character letter, I insert a context in a cell. After that, I hide a textarea.
This jsFiddle DEMO uses an online tutorial method that has been slightly modified to create a non-native browser text-caret along with transparent text.
Also, this jsFiddle New Method I created handles that goal differently but isn't IE8 friendly.
Status Update: I've improved the above jsFiddle DEMO with this newer version titled:
jsFiddle New Method that's Newer!!
The above jsFiddle version now allows the inside of the text-area to be clicked and the caret will respect that clicked location. This extra functionality was made possible by a great question and answer here.
Time to throw my $0.02 in.
This is an answer to the question, as I understood it, that works, it's quick and dirty, so feel free to make suggestions. This code is untested, but I did create a working fiddle here: http://jsfiddle.net/66RXc/
<html>
<head>
<title>Testing</title>
<script type="text/javascript">
<!--
function call(val) {
document.getElementById('result').value += val.charAt(val.length - 1);
document.getElementById('result').value =
document.getElementById('result').value.substr(0, val.length);
document.getElementById('test').value =
document.getElementById('test').value.replace(/[^\^]/g, ' ');
}
-->
</script>
</head>
<body>
<textarea name="textarea" cols="20" rows="5" id="test"
onKeyUp="call(this.value);"></textarea>
<textarea style="display:block" cols="20" rows="5" id="result" disabled>
</textarea>
</body>
</html>
The way I approached it was every time a character is typed in textarea "test", copy it over to a hidden text box, and replace all the characters in "test" except ^ with spaces. The characters are hidden, and the carat is still there. The full text is still in the other box. You could use display:hidden instead of display:block to hide it.
This isn't exactly the best implementation in the world, just something I did quickly. You have to type kind of slow (~15-20 WPM) for it to work.
Here is a CSS3 solution for making the text, itself, transparent:
Set the color attribute to be color: rgba(0,0,0,0); for the text
The only problem is that the caret goes invisible to. I did a quick search and found out that the caret and its styling are completely at the disposal of the browser. As such, the only option that I can think of for you is to use Javascript to add a simulated caret to the end of what you are typing.
I have an idea of how to do this, but it's messy and I wouldn't exactly call it ideal - I am, however, going to write it in case it helps further someone else's idea:
add a hidden label to the page
make sure it's hidden and not display: none; (so that it has actual width)
set white-space: nowrap; to keep it all on one line)
make sure the text is styled exactly the same as the text in the textarea
add the element <span id="caret">|</span> right before the textarea (I will refer to this as the caret for the rest of the spec)
set its position to position: relative;
increase its z-index to make it overlay
shift it right in order to set it on top of where the ACTUAL caret's initial position would be
make a function to check take in the value of the textarea and check the width of the textarea against the position of the caret (lookup selectionStart if you don't know how to do this)
the problem here is that characters are not always the same length, nor are they always the same length as their counterparts in other fonts
to solve this, as text is entered into the textarea you should have it imitated in the hidden label you created in step 1
imitate only the text from the start of the textarea to the caret's current position
wrap each character (including spaces) in their own span
next you will have to call a function to compare the width of the label with the width of the textarea
if the label is less wide than the textarea, get the width of the last span in the hidden label and shift the caret to the right by that width, then move on to step 4
as this is function will be run as text is entered it will happen one character at a time
be careful here that the caret doesn't go outside the textarea when it's in its last and near last positions
if the label is wider than the textarea:
add the widths of the characters (spans) in the label one at a time until you reach the width of the textarea
shift the position of the caret down by the height of the font and back to the horizontal starting position (as the caret's position is relative, just change its left position back to (0 + offsetToACTUALCaretPosition)
use a flag (e.g. class="break") to mark the last span (character) in the previous row
call the width comparison function again
make sure that you include a condition to check for the flags that you added at the end of each "row" (if any)
if you haven't already, apply any desired CSS styles to the caret span and change the color of the textarea's text to be color: rgba(0,0,0,0);
Caveats:
this will have a lot of overhead for the tiny job it does
you will have to adjust this method to account for padding
you will have to adjust this method to add support for deleting characters and moving the carets to an earlier position (to the left)
if you leave the textarea scrollable, you will have to add support for that (also for similar settings, like static heights causing text to scroll or move off screen/out of the textarea's visible area)
As I said before, I know that this solution is very rough, but it may help someone come up with a better one.
Good luck!
Based on your edit, if you need to just hide a textarea why don't you use jQuery $('#your_id').hide();
hello I'm trying a text box expand and collapse option, the text box expand while clicking on it, and collapse while clicking again on it, there is a placeholder in it, while I'm trying to click again in the text box the blinking cursor appears on the placeholder. please help me to hide the blinking cursor in the text field.
The code for this is:
<#spring.formTextarea "messageWallMessage.messageText", "rows=1 cols=1 style='font-size:11px;color:#666666;width:650px; min-height:28px; padding:0 0 0px 1px;margin: 6px 0 -6px 10px;' onkeyup='return showLinkedIcon();' onFocus='if(this.value == 'What\'s on your mind?') { this.value='';showLinkedIconPublish();return false;}' onBlur='return publishMsg();' onClick='return showLinkedIconPublish();'spellcheck='false'"/>
One solution is to have the textarea immediately call blur() when it gains focus while you want the cursor to be suppressed. You will of course need to add logic to prevent this behavior once you want the textarea to become selectable.
Here's a basic example: http://jsfiddle.net/3V8F6/1/
Unfortunately, it does not appear that you can alter the look of the text cursor without changing the look of the text along with it. The two are one in the same and part of the way the OS handles text in general (as far as I can tell).
You could make your text white to hide the cursor until someone starts typing, but I'm sure you were hoping for a better solution than that.
I need to hide the text box blinking cursor in CSS / Javascript.
Is it possible?
You could set a maxlength on the textbox and then use text-indent to move the cursor back more characters than the maxlength.
For example, you could set maxlength=20 and then for the text box set text-indent: -20em that way the text starts out of the box's boundaries and can't ever come into view.
Here is my solution from another question, that I answered already:
https://stackoverflow.com/a/23472096/1806628
The basic idea is, that the cursor's color is the same as the text's color. So the first thing you do is make the text transparent, thus taking the cursor away with it. Then you can make the text visible again with a text shadow.
input[type="text"]{
color : transparent;
text-shadow : 0 0 0 #000;
}
input[type="text"]:focus{
outline : none;
}
Warning:
It does not seem to work under iOS 8. (Thanks #Altaveron for the info)
Another idea of my is a bit more hacky and requires javascript.
HTML and CSS part:
You make 2 input fields and position one exactly on top of the another with z-index, etc. Then you make the top input field completely transparent, no focus, no color, and alike.
You need to set the visible, lower input to disabled, so that it only shows the content of the above input, but not actually works.
Javascript part:
After all the above you sync the two inputs. On keypress or on change you copy the contents of the higher input to the lower.
Summing all the above: you type in an invisible input, and that will be sent to the backend when the form submitted, but every update of the text in it will be echoed into the lower visible, but disabled input field.
This is pretty old, but I was just dealing with a similar issue. For browsers that support it (meaning, not IE8), you can set the color of the input element to be the same as its background (probably white), and then the cursor will be invisible.
<input type=text disabled="disabled"/>
because i can't see any other reason you might want to do that.
edit:
i guess you want to allow the user to scroll the text that is larger than the area, but not show the blinking?
if that is so, you still want to disable it. not just hide the blinking cursor. if the user can't type there, it should be disabled. period.
now, if you still want to allow the user to see all the content, you have to make the input as big as the content. there is no escaping that.
and then limit the size with a parent div with CSS overflow: hidden or scroll.
<div style="overflow: scroll-x;"><input size=255 value="some string 255 char long" /></div>
If it's an input with the readonly="readonly" attribute on it, Safari on iOS still shows a blinking cursor when focusing on it.
So to remove the blinking, the following worked for me:
-webkit-user-select: none;
user-select: none;