<input type="text" id="example"></input>
<div id="test"></div>
Is there anyway I can make text entered in #example appear in #test?
You have to use Javascript. Basically, with jQuery:
$("#example").change(function(){
$("#test").html($("#test").html() + $("#example").html());
});
this will do the trick:
$('#example').keyup(function(){
$('#test').val(this.value);
});
Related
I'm trying to store the html element of a table which includes textarea tags also.
I need to store the textarea with value when I call html() method in jquery.
Code in html:
<div id="test">
<textarea></textarea>
</div>
After user input for textarea field, for example user inputs "Mango".
Then when I call
var test = $('#test').html();
it should return the output as "< textarea >Mango< / textarea >"
Any ideas please. Thanks in Advance.
A <textarea> can contain innerHTML, which is displayed when there's no value:
$("#test textarea").append("<strong>Inner</strong> html");
console.log($("textarea").html())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"><textarea></textarea></div>
though it's mostly ignored (as shown above) and lost when user enters a value.
So we can take advantage of that by setting the HTML to the value just before reading the HTML and it should work. Here's a snippet that loops through all text areas as sets their HTML to the value:
// empty on load
console.log($("#test").html())
$("button").click(() => {
$("textarea").html(function() { return $(this).val(); });
// output the outer #test div's innerHTML
// includes both textareas and their newly set HTML
console.log($("#test").html())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
<textarea></textarea>
<textarea></textarea>
</div>
<button>click me</button>
As in title, I would like to see what I'm writing by input text.
There is my code:
function setLogo(txtLogo){
//edit logo by textarea
var myLogo = $("#title-logo");
myLogo.text(txtLogo);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtLogo" onkeyup="setLogo(this)" value="Logo Text">
<h2 id="title-logo"></h2>
When I'm writing I can see [object HTMLInputElement] inside h2 but if I'm not writing nothing I can't see nothing on it. Any ideas?
You don't have to set the object txtLogo as text, but instead its value.
function setLogo(txtLogo){
//edit logo by textarea
var myLogo = $("#title-logo");
myLogo.text(txtLogo.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtLogo" onkeyup="setLogo(this)" value="Logo Text">
<h2 id="title-logo"></h2>
In your case, you are passing an element. But you need to pass the text value of this element. You can solve this problem in two ways.
Add the value parameter to txtLogo. It should be like this:
myLogo.text(txtLogo.value);
Or you can write the same parameter for this, in event onkeyup, inside the <input> tag. Like this:
onkeyup="setLogo(this.value)"
I have a text input field and a div that contains an image.
I would like the image to disappear once a person starts typing in the input field.
<div id="writehere">
<input type="text" id="myinput">
</div>
<div id="container">
<div id="introimg"><img src=.../intro.png"/></div>
</div>
try this code.
$(document).ready(function () {
$("#myinput").keypress(function () {
$("#container").hide();
});
});
But how do you want to show the pic again?
i'm doing a goto link in web page, with an input text aside it.
the goto link appear both on top and bottom of webpage.
<div class="gotopage">
goto page<input type="text" class="page_i"/>
Go
</div>
in jquery, i need to get text beside link:
$('a.Goto').live('click',function(){
window.location.href = ...;
});
how to get text value, it shouldn't be id, for id appear twice.
Use prev() to get sibling text input:
$('a.Goto').live('click',function(){
window.location.href = $(this).prev('.page_i').val();
});
Wrap the text in a span tag:
<div class="gotopage">
<span>goto page</span><input type="text" class="page_i"/>
Go
</div>
Then select it
$('a.Goto').live('click',function(){
window.location.href = $(this).closest('span').text();
});
You can get text of an input box by using this code
<script>
$('a.Goto').live('click',function(){
txt=$('.gotopage .page_i').val();
alert(txt);
});
</script>
I'm not a web guy, so this might be something really simple I'm missing, but:
Consider the following page:
http://pastehtml.com/view/1bg9qno.html
Which is basically a list of <input>s, and each input has a helper <span> with text (that will change along with the input's value on keyUp).
So when the list is long enough (like in the above HTML page), if you tab thru the inputs, you will eventually get to the input on the bottom of the page, tab again, and the browser will scroll down to the next input.
In my case, the input has the helper text which is crucial to my app.
The problem is that when the user tabs down to the input that is not visible, the browser only brings that input into the view, and not his entire parent (<div class="item">) which contains the helper text. As a result, this helper text is not visible to the user while he enters stuff in the input.
How can one tell the browser to bring the entire parent into view when focusing the out-of-view input?
Is there any elegant solution?
BTW: This doesn't happen in Chrome, since Chrome always scrolls down a part-page, but it always happens in Firefox which always scrolls as little as possible to the input.
The HTML looks like this:
<body>
<div class="item">
<input type="text" value="text" />
<br />
<span>helper text</span>
</div>
<hr />
...
<hr />
<div class="item">
<input type="text" value="text" />
<br />
<span>helper text</span>
</div>
</body>
<html>
<head>
<script>
function scrollParentIntoView(elem){
setTimeout(function(){
var children = elem.parentNode.children;
var lastChild = children[children.length - 1];
lastChild.scrollIntoView();
elem.parentNode.scrollIntoView();
//elem.ScrollIntoView();
},1);
}
</script>
</head>
<body>
...
<div>
<input onfocus="scrollParentIntoView(this);" />
...
<p>end</p>
</div>
...
</body>
</html>
I've tested on FF and Chrome and seems to do the job - you can see the input and 'end' when each '...' is replaced with a dozen tags
Here is a solution using jQuery. It's based on the height of your item container.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".item input").focus(function() {
var parent = $(this).parent();
// Check if the bottom of the item container is below the viewport
if ($(parent).position().top + $(parent).height() > $(window).scrollTop() + $(window).height())
{
// Adjust the scroll position according to the height of the item container
$(window).scrollTop($(window).scrollTop() + $(parent).height());
}
});
});
</script>
Edit
Here is a demo for you: http://pastehtml.com/view/1bnv1xb.html
This Javascript works in FF 3.6, IE 8, Safari 4, and Chrome 3.1. It doesn't require JQuery, doesn't need setTimeouts, and can be condensed to about 8 lines:
//Collect the elements
var ALL = document.getElementsByTagName("INPUT");
for(x=0;x<ALL.length;x++) {
//Add relative position style to allow offset math
ALL.style.position = 'relative';
ALL[x].onfocus = function() {
//Find scroll offset distance
var temp = this.offsetParent.offsetTop +
this.offsetParent.offsetHeight -
document.documentElement.clientHeight;
//Detect webkit browser and apply scroll offset as appropriate
window.devicePixelRatio ?
document.body.scrollTop = temp :
document.documentElement.scrollTop = temp;
}
}
Of course, the obvious solution here is to put all the important content above the input element, but it's obvious that that won't do for whatever reason, so here's another solution:
Remember that tabindex can be used to allow any element to be focused. This means that we can simply drop a tabindex on the parent of the input elements to allow the entire parent to gain focus and scroll into view.
However, this also means that tab must be tapped twice to get the input element focused. You will also need to explicitly set tabindex on the input element to have them be the next in line to gain focus.
<ol id="input">
<li tabindex="3">
<input type="text" tabindex="5" />
<p>Helper Text</p>
</li>
<li tabindex="7">
<input type="text" tabindex="10" />
<p>Helper Text</p>
</li>
</ol>
You'll also want to give the parent elements a :focus style instead of the rather ugly dotted outline.
See: http://www.jsfiddle.net/F2fwy/2