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?
Related
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)"
Below is my code for the text area.
<div>
<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>
</div>
I want to display the content entered in this text area in another DIV.
Below is the code to display the content of text area.
<div data-bind="text: environment"/>
This div is displayed as shown in the below image.
Issue:
The new line is not captured when I am displaying the content in another div.
What all I tried?
I tried below ways to see if new line /n will be displayed as is, from text area.
But, no luck !
<div data-bind="html: environment"/>
<div data-bind="value: environment"/>
Please suggest if anyone has faced such issues.
Thank You!
Add the css rule white-space: pre-wrap to your div:
var viewModel = {
environment: ko.observable("initial text")
}
ko.applyBindings(viewModel);
div {
white-space: pre-wrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>Change text and click outside textarea in order to update value.</div>
<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>
<div>Entered text:</div>
<div data-bind="html: environment()"></div>
It's a bit dirty, but... You can replace '\n' with '' for display div:
var viewModel = {
environment: ko.observable("initial text")
}
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>Change text and click outside textarea in order to update value.</div>
<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>
<div>Entered text:</div>
<div data-bind="html: environment().replace('\n', '</br>')"></div>
Here is a piece of code that shows an issue I'm having http://jsfiddle.net/XmqgA/
HTML:
<div id="dialogg" style="display:none">
<input type="text" id="textinp" />
</div>
<p>Draggable boxes. Click a clickable box to open a dialog</p>
<div class="draggable ui-sortable">
<div class="dragme" id="clickbox">Clickable box</div>
<div class="dragme">Box</div>
</div>
<br/>
<p>Simple button that opens up a dialog</p>
<button id="click">Click</button>
JS:
$('.draggable').sortable({
connectWith: ".draggable",
items: "> .dragme",
appendTo: "body"
});
$("#click").unbind().bind("click", function () {
$("#dialogg").dialog();
$("#textinp").focus();
});
$("#clickbox").unbind().bind("click", function () {
$("#dialogg").dialog();
$("#textinp").focus();
});
Basically I have a simple button, a draggable/sortable element and a ui-dialog window with a text input field.
Both button and a sort element have an on-click event that opens up a ui-dialog.
Everything works fine except for the fact that when you open a dialog by clicking on the sort element a cursor/caret inside an input box in the ui-dialog won't blink. However in both cases input field will have focus.
Seems like this can be only replicated in Chrome but I couldn't find it among Chrome-only bugs.
Thanks!
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>
<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);
});