How do I add a string in the beginning of this textbox and have it as read only and then allow users to enter text ahead of it?
Here is my code:
<textarea style="width: 387px; height: 17px;" rows="3" class="do_input" name="job_title" cols="40"></textarea>
Currently it's a plain textbox you can type anything inside. What I want is like this: I WILL: demo text
so I Will: Will be read only and greyed and user input text will be in front of it.
This is pretty easy to do with a little bit of JavaScript.
Add an id, such asid="myTextArea", to the HTML for your textarea like this:
<textarea style="width: 387px; height: 17px;" rows="3" class="do_input" name="job_title" cols="40" id="myTextArea"></textarea>
Then, add the following JavaScript somewhere in your page or in the head section:
readOnlyString = "I WILL: "
myTextArea = document.getElementById("myTextArea");
myTextArea.value = readOnlyString;
preservedText = readOnlyString;
// Check the value only when the textarea is focused and after the user presses a key
myTextArea.onfocus = function () {
document.onkeyup = function (e) {
updatedText = myTextArea.value;
if (updatedText.indexOf(readOnlyString) == -1)
{
myTextArea.value = preservedText;
}
preservedText = myTextArea.value;
};
};
You can check out the JSFiddle here if you want to play around with it.
I think what you're looking for is the placeholder attribute
http://www.w3schools.com/tags/att_input_placeholder.asp
and I think you're also looking for the readonly attribute
http://www.w3schools.com/tags/att_input_readonly.asp
Related
Script
<script type="text/javascript">
function KeyHandler() {
var result = document.getElementById('result');
result.innerHTML=document.getElementById('txtInput').value;
}
</script>
HTML
<input type="text" id="inputField" />
<div id="screen"></div>
This code work good in html but i want
<a href="#?call=limit.lim&height=400&width=400&id={$ID}&team=
{$Name}&val={'**********'}&name={$Name2}&catname={$Cat}"
class="inlinePopup" title="{'Namer'}">{$Single}</a>
val={'****'} What ever i type in the text box that's i want here in the star position how
val={'<div id="screen"></div>'} this not work
Example : type a value 123 in the text box means that's instant like
val = 123
You could change the href attribute of the link in your KeyHandler function.
For example:
function keyHandler(){
var inputText = document.getElementById('inputField').value;
document.getElementById('myLink').href = '#?yourParam=something&val='+encodeURIComponent(inputText);
}
Would work with the HTML:
<input type="text" id="inputField" onkeydown="keyHandler()" />
Link Text
Could you adapt this technique to suit your needs? Alternatively, could you provide more details about your problem? Example code, motivation, context etc?
I have a form where a user is able to comment via a textarea. If the submit button is clicked it returns the value of what is entered in the textarea inside a textarea. How can I change this it so that on submit the value of the textarea is returned as a plain text/paragraph with jquery or php?
The code for textarea and button:
<textarea rows="6" cols="40" scroll="auto" name="reply_for_{$item.id}">
{if isset($item.reply)}
{$item.reply}
{/if}
</textarea>
<br />
<input name="addcomment" value="{lang mkey='submit'}" type="button" onclick="
document.forms['commentsFrm'].id.value={$item.id};
document.forms['commentsFrm'].submit();
"/>
$('input[name="addcomment"]').on('click',function(){
var comment = $('textarea').val();
$('textarea').remove(); // removes the textarea
var actContent = $(this).parent().html(); // get the actual content of the parent dom node.
$(this).parent.html('<p>'+comment+'</p>'+actContent); // you set the new html content for the parent dom node
});
So this would take the textarea content and save it into a paragraph. A bit akward solution but it should do the magic.
Lots of ways to do this, but here's what comes to mind:
$('input[name="addcomment"]').on('click', function() {
var textArea = $('textarea[name="reply_for_{$item.id}"]');
var text = textArea.val();
$('<div id="no-editing-me">').text(text).insertAfter(textArea);
textArea.hide();
});
If you give your elements IDs, you won't have to worry about all that [name="reply_for_{$item.id}"] gunk in the jQuery. It'll be faster, too.
the 2 answers solved partly the problem. However It gave me some new inspiration and I solved it like this
{if $item.reply == ''}
<form name="reply" method="post" action="reply">
<textarea id="txtreply" name="txtreply" cols="50" rows="5"></textarea>
<input type="submit" name="btnAdd" value="{lang mkey='send'}" />
</form>
{else}
{$item.reply}
{/if}
Thanks everybody for your help
I would like to know how to auto change sample border when visitor key-in color code in input textfield at:
Do you have a particular border colour you would like?
input name="ContentInclude:borderspecs" type="text" maxlength="200" id="ContentInclude_borderspecs" tabindex="5" style="width:500px"
https://advertiser.seek.com.au/advertisers/catalogue/templaterequest.ascx
The sample code start with: begin sample template
The simplest solution:
<input name="ContentInclude:borderspecs" type="text" maxlength="200"
id="ContentInclude_borderspecs" tabindex="5" style="width:500px"
onkeyup="javascript:changeBorderColor(this);">
JS code:
<script>
function changeBorderColor(elem){
var template = document.getElementById('sampletemplate');
if (elem.value.match(/^\#([\dabcdef]{3}|[\dabcdef]{6})$/i)) { // HEX code
template.style.borderColor = elem.value;
}
// more else if to match other possible values
else { // reset to default
template.style.borderColor = null; // or "black"
}
}
</script>
// edited so it changes the color of template preview div#sampletemplate
I have a inputbox. What I want to make it when I click in the inputbox a text to appear NEAR the inputbox, if I click OUT inputbox, the text disappears...
I've tried this, and it works but not completely:
<style type="text/css">
.hidden {display:none}
</style>
then
<input name="title" type="text" id="title" onclick="document.getElementById ('TEXT_CLASS').className = document.getElementById ('TEXT_CLASS').className == 'hidden' ? '' : 'hidden'" />
then
<span id="TEXT_CLASS" class="hidden">the text that I want to appear on click</span>
so this all does works, BUT, the text does not disappear when I click out, the text just toggles..
Can somebody please help me in making the text appear ONLY when "onclick", and disappear ONLY when "click out"?
Thank you
When you say click out, I think you mean blur.. meaning the textbox losing focus.. Then you need to implement the onblur event.
You should implement onfocus and onblur like below.
<input name="title" type="text" id="title"
onfocus="document.getElementById('TEXT_CLASS').className = ''";
onblur=" document.getElementById('TEXT_CLASS').className = 'hidden';"
/>
Probably you should consider doing this like below,
<input name="title" type="text" id="title" />
<span id="TEXT_CLASS" class="hidden">Test Class</span>
<script>
var titleEl = document.getElementById('title');
var textSpanEl = document.getElementById('TEXT_CLASS');
titleEl.onfocus = function () {
textSpanEl .className = '';
}
titleEl.onblur = function () {
textSpanEl .className = 'hidden';
}
</script>
DEMO: http://jsfiddle.net/LyKze/
If you're using jQuery, you can do something like
$('#title').click(function(){
$('#TEXT_CLASS').css('display', $('#TEXT_CLASS').is(':visible') ? 'none' : 'block');
})
I suggest you create a javascript function which will toggle the visibility of the span.
function setVisilibity(span, visible)
{
span.style.display = visible ? "block" : "none";
}
Set TEXT_CLASS to hidden by default and then do the following
$("#title").focus(functiion(){
$("#TEXT_CLASS").show();
});
The concept of my script is
show a textarea.
when I start giving input to
the textarea, it'll show the second
textarea.
In the same way, when I start to
input sometext in the second
textarea,
it'll show the other one and so on.
html :
<div id="question">
Question 1:<br />
<textarea rows="7" cols="72"></textarea>
</div>
javascript :
var num = 1;
$('#question').keyup(function(){
num++;
$('#question').append('
<br />Question '+num+':
<br /><textarea rows="7" cols="72">
</textarea>');
});
the problem :
when I input some word on textarea1, it shows textarea2.
but, when I input word again on textarea1, it will show a different textarea.
can any one please help me?
I don't get the idea for checking on my javascript.
Thank you
Try this, just a simple demo, http://jsfiddle.net/kCtHn/