In text box because of button click event text is transfer to text box, this text hold its place after also another click event which pass new value to text box. The text box hold the value for multiple click event.
in each click function,you should get the text box's value,and then add the new value to it .Then put the "sum" to the text box.
I can't really understand what you mean, but I made two codes that are quite simple and should get you to understand how this works approx.
You can achieve what you mean with createTextNode and appendChild.
Hope this helps. Happy coding.
JS FIDDLE
<html>
<head>
<title>text</title>
<script type="text/javascript">
function trantxt(input) {
var obj=document.getElementById(input);
var txt=document.getElementById('text1').value;
var txtarea=document.createTextNode(txt);
obj.appendChild(txtarea);
}
function addtxt(input) {
var obj=document.getElementById(input);
var txt=document.createTextNode("blah blah");
obj.appendChild(txt);
}
</script>
</head>
<body>
<h1>Case 1: Transfer text from textbox to textarea.</h1>
<input type="text" id="text1" placeholder="Write here" />
<input type="button" value="Transfer" onclick="trantxt('textarea1')">
<textarea id="textarea1" placeholder="Content comes here"></textarea>
<h1>
Or... if you mean this
</h1>
<textarea id="textarea2"></textarea>
<br><input type="button" value="Write blah blah" onclick="addtxt('textarea2')">
</body>
</html>
Related
I want to change the text field into a label tag with input user typed text inside it. I have tried and seen many example which are working but not set value as a text in label. e.g.:
<input id="1" type="text" value="hi"/>
I want to replace this input text field with label or div tag with its innerHTML hi or the user typed value i have tried the example below but i it is not done by me.
<p id="1" onclick="wish(id)">sasdsad</p>
<script>
document.getElementById("1").outerHTML = document.getElementById("1").outerHTML.replace(/p/g,"div");
</scrip>
Element id should start with character not number.
With using jQuery
<input id="one" type="text" value="hi"/>
$('#one').replaceWith("<div>"+$('#one').val()+"</div>");
Or you can use like this as well, just for an alternative solution :
html
<input id="toChange" type="text" value="hi"/>
<p id="clickMe" onclick="changeTag()">Click Me</p>
jQuery
function changeTag(){
var originalForm = $('#toChange');
var div = $('<div/>',{
text : originalForm.val(),
id : originalForm.attr('id')
});
$('#toChange').replaceWith(div);
}
DEMO
It seems that chrome is not firing a change event when a text field has been cleared just after the form has been reset.
Here is the code:
<html>
<head>
<script>
function doChange() {
document.getElementById('info').innerHTML = 'Field changed to:[' + event.target.value + ']';
}
</script>
</head>
<body>
<form>
<input type='text' value='test1' onChange='doChange();'/>
<input type='text' value='test2' onChange='doChange();'/>
<button type='reset'>Reset</button>
<div id='info'></div>
</form>
</body>
</html>
See http://jsfiddle.net/ahc6fpuw/ for the test bed.
Is this a know issue and if so is does anyone have a work around?
Add steps to create the problem:
1 Enter some text into the first text field
2 Press the reset button (that resets the text correctly)
3 Select all the text in the first field and press the delete key
4 Press the tab key to move to the second text field. The doChange function should have been called but it is not.
Reset gives the default value to the html element, in your case it is "test1" & "test2", so even if you do reset it will show the "test1" & "test2".
The reset button doesn't clears the text inside the form it just resets to given value.
Try placeholder instead value attribute
<form>
<input type='text' placeholder='test1' onChange='doChange();'/>
<input type='text' placeholder='test2' onChange='doChange();'/>
<button type='reset'>Reset</button>
<div id='info'></div>
</form>
I have a simple <input type="text"> field in my html code with onChange property set to call javascript function, which takes the text and displays it. So, how it looks like currently:
<input type="text" id="inputField" onChange="displayText()"></input>
<span id="toDisplay"></span>
and javascript:
function displayText() {
var text = document.getElementById("inputField").value;
document.getElementById("toDisplay").innerHTML = text;
}
So the text in the span is updated when the user presses enter.
Is there a way of doing a "real-time" update? In other words, I would like the text to appear in the span as soon as the user enters it.
<input type="text" id="inputField" onKeyUp="displayText()"></input>
I would like to have a button to the right of a textbox which when clicked would populate the textbox with a message.
I am assuming I can accomplish this with Javascript but the "onclick" method doesn't seem to work for me. I am probably doing it wrong.
Using JavaScript and HTML :
I am guessing what you need is, may be as follow:
<!DOCTYPE html>
<html>
<head>
<script>
function ButtonClick_Test()
{
document.getElementById("result").value= ' your text here';
}
</script>
</head>
<body>
<form>
Click Here:<br/>
<input type="button" value="Click Here" name="no" onclick="ButtonClick_Test()">
<input type="text" id="result" size="20">
</form>
</body>
</html>
Assuming you are using jQuery(http://jquery.com/):
$('#buttonID').click(function() {
$('#textareaID').val('Your text goes here');
}
When my JSP page gets loaded, the button (actually an image button with onfocus property) gets focused. So, on pressing enter it gets clicked. It is a small, part of a bigger problem. How can I make the button lose focus when page is loaded?
<html>
<head>
</head>
<body>
<div onkeypress =handleEnter()>
name <input type="text" src='Create.gif' >
</br>
<input type="image" src='Create.gif' onclick="alert('not done')">
<input type="image" src='Create.gif' onclick="alert('done')">
</div>
</body>
<script>
function handleEnter()
{
if(window.event.keyCode==13)
{
alert('nothing');
event.cancelBubble=true;
}
}
</script>
</html>
Both the alert box for nothing and not done has been shown.
You can use the autofocus HTML attribute (specification reference) to automatically focus a different element on page load. I'm not sure how this would get applied with JSP, however in pure HTML this would be something along the lines of:
<button>My Button</button>
<button autofocus>My Other Button</button>
Here's a JSFiddle demo.
I would modify this line :
<input type="text" src='Create.gif' >
to
<input type="text" id="textbox" src='Create.gif' >
<script>
//$('#textbox').focus() //If your using jQuery
document.getElementById('textbox').focus()
</script>
This would shift the focus to the text box rather than the image button
Give your textbox an id and use that id to set the focus to that element.
document.getElementById('textbox').focus()