Change textbox to textarea on click - javascript

How do I convert a simple text box to text area when the user clicks on it. I'm using EXT JS.

Are you doing it just for visual appearance? Or is there a valid reason for converting it from input to textarea?
If you are doing it just for the visuals of it you can get a long way with just setting the height of your textarea and in the focus event increase the height.
Ext.onReady(function(){
new Ext.form.TextArea({
renderTo: Ext.getBody(),
name: 'myTextArea',
width: 200,
height: 22,
listeners: {
focus: function(textarea){
textarea.setHeight(200);
},
blur: function(textarea){
textarea.setHeight(22);
}
}
});
});
EDIT: These stopped working:
Try it here: http://jsfiddle.net/chrisramakers/9FjGv/2/
You can even quite easily animate it for some extra fancy visualy fancy pancy.
http://jsfiddle.net/chrisramakers/9FjGv/3/

You can't change a textbox to a textarea because they are two different types of elements. You can however hide one and display the other.
<input type='text' id='myTextBox' />
<textarea id='myTextArea' />
With some function that could swap them on whatever event you want:
function swapTexts() {
var tb = document.getElementById('myTextBox');
var ta = document.getElementById('myTextArea');
if (tb.style.display !== 'none') {
tb.style.display = 'none';
ta.style.display = '';
} else {
tb.style.display = '';
ta.style.display = 'none';
}
}

show and hide is nice technic. but., u can use innerHTML property also like this...
<div id='test'> <input type="text" name="text1" id="text1" onclick="test()"/></div>
<script type="text/javascript">
function test()
{
document.getElementById('test').innerHTML = "<textarea></textarea>"
}
</script>
if u want to change again, give some condition or any event.. this may help u i think..
have a good day.....

You can have two separate controls of TextBox and TextArea in the same div (or table) and then show the TextArea on click of TextBox
<input type='text' onclick='document.getElementById("txtArId").style.display = ""' />
<TextArea id='txtArId' />

Here's an example done in jQuery.
HTML:
<tr>
<td>
<input name="textInputComment" type="text" value="">
<textarea name="textAreaComment" style="display: none;"></textarea>
</td>
</tr>
jQuery:
$(document).ready(function()
$(document).on('focusin', 'input[name=textInputComment]', function () {
$(this).hide();
textarea = $(this).closest('tr').find('textarea[name=textAreaComment]');
textarea.show().focus().val($(this).val());//show, focus and get value from input
});
$(document).on('focusout', 'textarea[name=textAreaComment]', function () {
$(this).hide();
textarea = $(this).closest('tr').find('input[name=textInputComment]');
textarea.show().val($(this).val());//get value from textarea
});
});

Related

Show element in JavaScript by onkeypress function

I'm trying to show save button only if input gets value,
The issue is if i use append for each input i get 1 button printed, what I'm looking for is regardless of input length get the button only once.
The important is input not be empty that's all.
Code
<input class="text_dec form-control" type="text" onkeypress="myFunction()" name="text_dec[]" id="'+ textFieldsCount.toString() +'">
function myFunction() {
$('#moreless').append("button here");
}
any idea?
Instead of keypress, use keyup, this will call the listener just when the key is released, so you will have the correct length of the input value. With that, you can check if the button must be displayed or not.
Also, I would have another check to make sure that input have some value on it to save when clicked.
Like below, take a look:
$(function(){
$('.myInput').on('keyup', function(){
var btnElem = $('.myButton');
var charLength = this.value.length;
if (charLength > 0){
btnElem.show();
}else {
btnElem.hide();
}
});
$(".myButton").on("click", function(){
if ($('.myInput').val().trim().length < 1){
alert("Input is empty")
return;
}
//Do your code
});
});
.myButton {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="myInput" type="text" value="">
<input class="myButton" type="button" value="Save Button" />
</body>
EDIT
Now, if you really need to make as you were doing before (I don't consider it a best practice and also recommend you to rethink if you really wanna go through this) here goes a code that will help you. Click to show.
Here I added the functions and created the button element (if necessary) then append it to DOM just when the input have some value length.
function myFunction(input){
var btnElem = $(".mySaveButton")[0];
if (!btnElem){
btnElem = document.createElement("button");
btnElem.textContent = "Save Button";
btnElem.onclick = btnClicked;
btnElem.className = "mySaveButton";
}
var charLength = input.value.length;
if (charLength > 0){
document.body.append(btnElem);
}else {
btnElem.remove();
}
};
function btnClicked(){
if ($('.myInput').val().trim().length < 1){
alert("Input is empty")
return;
}
//Do your code
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="myInput" type="text" value="" onkeyup="myFunction(this)">
</body>
So I think you just want a button to show to the user once they type something in the text box. If that's the case, then you don't really want to append a button every time they press a key in the box.
Instead I'd make a button and set its css to display none and then when they keydown in the text box change the button's css to display block.
Something like this: http://jsfiddle.net/wug1bmse/10/
<body>
<input type="text">
<input class="myButton" type="button" value="button text" />
</body>
.myButton {
display: none;
}
$(function(){
$('input').on('keypress',function(){
var htmlElement= $('.myButton');
htmlElement.css('display', 'block');
});
});
Hiding the element with a class might be easier:
.btn-hidden {
display: none;
}
<input id="save-button" class="btn-hidden" type="button" value="save" />
function showSave() {
$('#save-button').removeClass('btn-hidden');
}
function hideSave() {
$('#save-button').addClass('btn-hidden');
}

How can show a div when input has a value?

I have an input text that and a hide div.
I want to show the div when the input text has a value.
Here is the demo: http://jsfiddle.net/vyc7N/181/
<label for="db">Type whatever</label>
<input type="text"name="amount" />
<div id="yeah" style="display:none;">
<input type="submit" />
</div>
Please somebody can help me?
You can write the code in keyup event of textbox to get the length of text entered in it.
$('input[name=amount]').keyup(function(){
if($(this).val().length)
$('#yeah').show();
else
$('#yeah').hide();
});
Working Demo
you can also use .toggle() instead of using .show/.hide():
$('input[name=amount]').keyup(function(){
$('#yeah').toggle($(this).val().length);
});
$('input[name=amount]').bind('keyup change', function(){
if(!$(this).val())
$("#yeah").css('display', 'none');
else
$("#yeah").css('display', '');
});
Working fiddle
Use following logic : If after trimming there is some value , then show else hide.
$('input[name=amount]').keyup(function(){
if($.trim($(this).val())!='')
$('#yeah').show();
else
$('#yeah').hide();
});
This is pure javascript and DOM, no jQuery
You could use onkeyup():
<label>Type whatever</label>
<input id='inptOne' type="text" name="amount" onkeyup="myFunction()" />
<div id="yeah" style="display:none">
<input type="submit" />
</div>
<script>
//if input has some value will show the button
window.myFunction = function() {
//alert('it ran!');
var hasValue = document.getElementById('inptOne').value;
if (!!hasValue) {
document.getElementById('yeah').style.display = 'inline';
} else {
document.getElementById('yeah').style.display = 'none';
};
};
</script>
Click Here for jsfiddle

Popup box doesn't return a value when click ok

Im working with Asp .net MVC3.I'm using text box in viewpage when focusing on a text box popup window will open which contains a textarea and ok button.when click ok populated in viewpage textbox and popup page has to be hided.im using following code,
<input type="text" id ="Comments" class="Comments" value= "value"/>
<div id="popup">
<input type="text" id="content" style="width:243px;height:150px" maxlength="250" cols="70" rows="50"></input>
<input id="popupok" type="Button" value="Ok" />
<input id="popupclose" type="Button" value="Close"/>
</div>
and following is the Jquery,
$(function () {
$('.Comments').focus(function(){
$('#popup').show("slow");
});
$('#popupclose').click(function () {
$('#popup').hide("slow");
});
$('#popupok').click(function () {
var thought = $("#content").val();
$(".Comments").Val()=thought;
$('#popup').hide("slow");
});
});
Im not getting the Content value on the thought variable when click ok.what is wrong in thie above code.some one please help on this
Try this,
$('#popupok').click(function () {
var thought = $("#content").val();
$(".Comments").val(thought); // val function need an argument to set value
$('#popup').hide("slow");
});
Live Demo

Change span when text field changes

I have a form with several text fields. I want to change a span tag when I write something in the field. Like this:
Any ideas?
You can use keyup and then replace the span content with the textbox value.
<input id="test" type="text" />
<span id="content"></span>
$("#test").keyup(function() {
$("#content").html($("#test").val());
});
http://jsfiddle.net/
Edit:
You can also use $(this).val() as pXL has suggested.
$("#test").keyup(function() {
var val = $(this).val();
$("#content").html(val);
});
You can simply use jquery for this. For eg
<input type="text" id="mytext"/>
<span id="content"></span>
$(document).ready(function(){
$("#mytext").keyup(function(){
$('#content').html($(this).val());
})
})
I would use $.keyup() and update the html with input value.
Demo: Working Demo
$(document).ready(function()
{
// Regular typing updates.
$("#input").keyup(function()
{
$("#output").html($(this).val());
});
// If pasted with mouse, when blur triggers, update.
$("#input").change(function()
{
$(this).keyup();
});
// Any value loaded with the page.
$("#input").keyup();
});
The lost focus is also an aproach,
html:
<input type="text" id="txa" value="123" />
<span>345</span>
jquery:
$('input[id=txa]').blur(function () {
$(this).next("span").text($(this).val());
});
Glad to help.

Select/Unselect Text on click Using jQuery

I want to create the following behavior in IE9:
Clicking on the textbox will select the text from the textbox. Clicking on it again will unselect the text.
I tried the following from this linK: http://www.codingforums.com/showthread.php?t=105530
var x = 2;
function selectIt(obj)
{
if (x % 2 == 0)
{
obj.select();
}
else
{
if (document.selection)
{
document.selection.empty();
obj.blur();
}
else
{
window.getSelection().removeAllRanges();
}
}
obj.focus();
x++;
}
I also used this: http://jsfiddle.net/HmQxZ/1/
But the above solutions have weird behaviors when applied to several textboxes. What is the best way to approach this kind of problem. Is it possible to do this without using a global variable?
UPDATE:
The fiddle works in Chrome. But it does not work in IE9. In IE9, the text is selected but when you click on the textbox again, the text is not unselected/unhighlighted. In Chrome, the second click unselects/unhighlights the text.
Thank you.
The problem with several text boxes would be that your x variable is global. You'd need a separate x variable per textbox.
You could use a map:
var x = {};
function selectIt(obj)
{
var key = ... <-- get name (or id) of textbox from obj somehow to use as key in map
if (!x.hasOwnProperty(key)) x[key] = 0;
if (x[key] % 2 == 0)
{
obj.select();
}
else
{
if (document.selection)
{
document.selection.empty();
obj.blur();
}
else
{
window.getSelection().removeAllRanges();
}
}
obj.focus();
x[key]++;
}
Here is your complete solution.
Demo http://codebins.com/bin/4ldqp79
HTML
<div id="panel">
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
</div>
JQuery
$(function() {
$("#panel input[type=text]").click(function() {
$(this).select();
});
});
CSS
input{
display:block;
border:1px solid #333;
background:#efefef;
margin-top:15px;
padding:3px;
}
Demo http://codebins.com/bin/4ldqp79
This works for me in Chrome - there is a toggle event function in jQuery but it is not needed in this case
$('input').click(function() {
// the select() function on the DOM element will do what you want
this.select();
});
​
but I suggest you tell the script which types of fields you want to select
$("input[type=text], input[type=url]").click(function() {
$(this).select(); // "this" is native JS
});
​DEMO
Try this Demo
DEMO jQuery:
$(function(){
$("input[type='Text']").on("click",function(){
if (typeof this.selectionStart == "number")
this.select();
});
});

Categories

Resources