I have two text boxes like,
<input type="text" id="left" />
<input type="text" id="right" />
Is it possible to focus these two text boxes at the same time?
I don't know how it possible.I need to show cursor in these two text boxes at the same time.
if i focus #left ,#right lost its focus.
Note : I am trying to create a side by side web application.shows two same views on single web page.
I know how to show the same values,I need to show the cursor blinking on two inputs.
Try doing something like this...Every time the left input is changed the right one's value is change too.
$("#left").on("input",function() {
$("#right").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="left" />
<input type="text" id="right" />
If you want to clone your input, you can simply do this by adding an oninput attribute like:
<input type="text" id="left" name="left" oninput="right.value = left.value; return true;" />
<input type="text" id="right" name="right" oninput="left.value = right.value; return true;" />
No jQuery needed. Customize it the way you want it. Here's a fiddle:
<input type="text" id="left" name="left" oninput="right.value = left.value; return true;" />
<input type="text" id="right" name="right" oninput="left.value = right.value; return true;" />
You can't, and you really shouldn't...
That's like asking you to read a book while watching TV.
However, that sort of thing, might be possible on multi-user & multi-touch OS machines. That is, two users on the same machine can work two different tasks simultaneously on the same surface. But that's military. And even than, one user, can only have one input focus at a time.
you can't focus same time, but you make it like you write in one textbox same time bind it in other textbox using jQuery or AngularJS.
I found http://codepen.io/keilin/pen/lCkap for css.
And added:
$("#left").on('keydown change', function(e) {
$("#right").val($(this).val());
console.log($("#right").val());
$overlay.text($(this).val());
var offset = $cursor.offset();
var inputLeft = $(_this).offset().left;
offset.left = Math.min($overlay.outerWidth(), $(_this).innerWidth() - 4);
offset.left = inputLeft + Math.max(offset.left, 0);
$cursor.offset(offset);
});
If i understand correctly, you want something this: https://jsfiddle.net/8csab3t1/1/
ps: It's just an example. Please check with two chars.
Related
Hey so right now i have the code below that functions as a Ctrl+F search but within a search box. The website im using this on only have one code area so i need the code to function within the same one.
The code below does what i want it to do but at this moment we need to click on the search button the first time and then we can follow up with enter after that. What i want it to do is make it possible to accept the enter key from the start and at the same time have the button as an option.
Is this possible?
<!--BEGIN SEARCH BOX -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div class="search_box">
<div><input id="search" type="textarea" /> <input id="submit_form" onclick="checkInput()" type="button" value="Sök" /></div>
<div> </div>
<div>
<p>2019-11-11 - 2020-01-10 - Testing line 837<br />
PDF</p>
<p>2019-11-04 - 2019-11-24 - Testing 2, line 607, 627, 697<br />
PDF</p>
<p>2019-10-30 - 2019-11-29 - Testing 3, line 55, 75, 291<br />
PDF</p>
<p>2019-10-31 - 2019-11-04 - Testing 4, line 423,424<br />
PDF</p>
</div>
</div>
<!--END SEARCH BOX --><script>
function checkInput() {
var query = document.getElementById('search').value;
window.find(query);
return true;
}
</script>
You have indicated that you cannot use a form tag due to restrictions on your hosting system. I dare say that your company may need to look into that, but a workaround solution may be to catch the Enter keypress on your input, as described here: execute function on enter key
In your case this might look like this:
var searchbox = document.getElementById("search");
searchbox.addEventListener("keydown", function (e) {
if (e.keyCode === 13) { //checks whether the pressed key is "Enter"
checkInput();
}
});
Your input type is a textarea, so hitting Enter will be interpreted as creating a new line within that box. Change it to:
<input id="search" type="text" />
for a single line text field, and Enter will submit the form.
Which, by the way, you should probably enclose your inputs in, and change button type to submit:
<form onsubmit="checkInput()">
<input id="search" type="text" /> <input id="submit_form" type="submit" value="Sök" />
</form>
If i only use the following it works even if i have return set to true or false. It works almost perfectly, if i type anything in the box i need to click the button the first time and can then continue by clicking enter on my keyboard and it continues the search going down. I just have to click the button the first time and thats what annoys me :/
<div><input id="search" type="text" /> <input id="submit_form" onclick="checkInput()" type="button" value="Sök" /></div>
the "onclick" is what i want as onsubmit i guess but i cant just change that to onsubmit couse that will brake it.
I'm trying to make an upvote function on my website, and it basically works. However, all the Upvoting buttons link to the same thing.
I have something like this:
<th width = 50%>
MAUDE BONNEY
<br><br>
<div class="box">
<label for="qty">
<abbr title="Quantity">Up Vote!</abbr>
</label>
<input id="qty" value="0" />
<button id="down" onclick="modify_qty(-1)">-1</button>
<button id="up" onclick="modify_qty(1)">+1</button>
</th>
and here's my javascript (I have a css but I don't think its important)
function modify_qty(val) {
var qty = document.getElementById('qty').value;
var new_qty = parseInt(qty,10) + val;
document.getElementById('qty').value = new_qty;
return new_qty;
}
How do I make all the buttons not connected? When you press one of the +1 or -1 buttons it only effects one of the counters. How do I make them all individuals?
Using your current way of labeling(id), you can't really link each button to a specific count without having each button having a different id. You could do it with php, but you need to download a server and things like that. So for now, there isn't really an easy way for you to link each button to a specific count.
I want to have the input boxes linked so that when you type something in one, it shows up in the other (and vice versa). Here's a "codepen" that shows how I'm doing it currently.
http://codepen.io/anon/pen/yEAbk/
It's pretty simple, but I feel like there should be an easier way to accomplish this. There is also a problem with this method that I illustrated in the codepen. You'll notice the button that fills one of the boxes with a string. Even though the content has been changed, the "onchange" event doesn't run, and so the other input box is not updated.
Is there an easier way to do this that will fix the problems I've been having?
This is exactly the kind of problem databinding is meant to solve. There are lots of libraries out there, but the most popular currently is AngularJS (by google). http://angularjs.org/
See demo: http://jsfiddle.net/34ZCs/2/ both inputs are bound to variable yourName:
<div ng-app>
<div>
<input type="text" ng-model="yourName" placeholder="A">
<input type="text" ng-model="yourName" placeholder="B">
</div>
</div>
Use "onkeyup" instead of "onchange". Then the next textbox will be updated instantly.
Do something like this
<input type="text" name="a" id="a" onkeyup="fillBoth('a','b')" onfocus="fillBoth('a','b')" />
<input type="text" name="b" id="b" onkeyup="fillBoth('b','a')"
onfocus="fillBoth('a','b')"/>
<button type="button" id="clicky" onclick="fillWithX()">click here for xxx</button>
And you JavaScript should be updated like this.
function fillWithX() {
document.getElementById('a').value = 'xxx';
document.getElementById('a').focus();
}
Slight change in your event handler might do the trick. Take a look: http://codepen.io/anon/pen/budnp/
<input type="text" name="a" id="a" onchange="fillBoth('b', 'a');" />
<input type="text" name="b" id="b" onchange="fillBoth('a', 'b');" />
<button type="button" id="clicky" onclick="fillWithX()">click here for xxx</button>
and the script:
function fillBoth(copyTo, copyFrom) {
document.getElementById(copyTo).value = document.getElementById(copyFrom).value;
}
I have a function that calculate price for a product. I'm not JavaScript developer so my knowledge is very limited.
By changing the value in the text field script calculate price for product.
<input type="text" value="" name="options[22]" class="input-text"
onfocus="opConfig.reloadPrice()">
Problem is that the script triggers only if the following is done:
insert value into the textfield
click somewhere outside the textfield
click back into the text field
All I need is a button saying refresh that by clicking it will have functionality of step 2 and step above.
I'm not sure if I explained it properly so if there is any more information required to resolve this issue please let me know.
Here is the link to the site.
http://www.floorstodoors.mldemo.co.uk/spotlight/oak-value-lacquered-3-strip.html
The field im trying to amend/add refresh button is Enter Square Metre
You'd add your event to a button, and retrieve a reference to your input by assigning an ID:
<input type="text" value="" name="options[22]" id="price" class="input-text" />
<input type="button" value="Refresh" onclick="reloadPrice();" />
function reloadPrice() {
var price = "0.00"; // set your price here
// get a ref to your element and assign value
var elem = document.getElementById("price");
elem.value = price;
}
I'm not sure I fully understand you, but is this what you need?
<input type="text" value="" name="options[22]" class="input-text">
<input type="button" onclick="opConfig.reloadPrice()" value="Refresh" />
A button with an click-event listener, so that when you click the refresh-button the opConfig.reloadPrice() method gets executed.
Edit based on comment:
I'm not sure what JavaScript library you are using, but you have these two lines in you code that seems to add event-listeners to the input with id qty.
$('qty').observe('focus',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('focus',this.getFromQties.bind(this))
They are listening for the focus event, thus only triggers when your input field gains focus.
If you modify those to listen for the keyup event instead, I believe it will work better. Without being familiar with the framework, I guess the only thing to change would be this:
$('qty').observe('keyup',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('keyup',this.getFromQties.bind(this))
Use onchange or onblur instead of onfocus!
use onchange. This will activate anytime the value changes:
<input type="text" value="" name="options[22]" class="input-text" onchange="opConfig.reloadPrice()">
First: this is JavaScript and not Java - so you have to be a javascript and not a java developer.
to solve your problem you can make a new button with a onclick attribute and execute your function there which you have in your onfocus attribute in the text-field.
or you can take another event - like onchange or onblur for instance..
<input type="text" onchange="..yourfunctionhere...">
http://www.w3schools.com/js/js_events.asp
All I need is a button saying refresh that by clicking it will have functionality
For that you need a button with onclick listener,
do the below things.
<input type="button" value="Refresh" onclick="opConfig.reloadPrice();" />
<input type="text" value="" name="options[22]" class="input-text"/>
I am trying create a 'live' view where our clients can edit the colors of a php page that they will embed into their own page.
By entering a hex value in each of the text fields, it should instantly change the background color value set for it's relative div.
<!--Enter a hex color to change the background of id="box1" -->
<input name="color1" id="color1" type="text" size="6" maxlength="6" onchange="DOTHIS(change background color of 'box1' to this value);" />
<br />
<!--Enter a hex color to change the background of id="box2" -->
<input name="color2" id="color2" type="text" size="6" maxlength="6" onchange="DOTHIS(change background color of 'box2' to this value);" />
<br />
<!--Enter a hex color to change the background of id="box2" -->
<input name="color3" id="color3" type="text" size="6" maxlength="6" onchange="DOTHIS(change background color of 'box3' to this value);" />
<hr />
<div id="box1" style="background-color:#ff0000">HELLO 1</div>
<div id="box2" style="background-color:#00ff00">HELLO 2</div>
<div id="box3" style="background-color:#0000ff">HELLO 3</div>
This is probably simple to someone, but after a couple of days, I cannot find the right way to do it.
UPDATE:
After seeing the direction of the answers, I thought I'd better add the following..
How would this work if the id names were not related?
example:
id="maincolor" -> affected id="hello"
id="fontcolor" -> affected id="world"
id="buttoncolor" -> affected id="foo"
This is why I thought it might be better to inline javascript for each element?
There are only four colours to change, plus an option to hide various divs containing text and one checkbox to hide the title..
The system is here: https://www.overseasmortgagefinder.co.uk/affiliates/generator.php
As you can see from the left side, our users can customise how the 'sourcing system' will look on their site.
What I am trying to do is create a 'live view' window on the right instead of the static help guide.
Is this any clearer as to my goal?
Well here's a fairly dynamic approach using jquery.
Change the format of the id's of your inputs to color-box1, color-box2 and color-box3 respectively.
<script type="text/javascript">
$(function() {
// assigns a onChange event to all inputs with ids that start with "color-box"
$("input[id^=color-box]").change(function () {
// validate user's input here
// if valid, grab id of changed input & remove the "color-" part
var id = $(this).attr("id").split("-", 2)[1];
// set color of div using the id above
$("div#"+id).css("background-color","#"+$(this).val());
});
});
</script>
If you need a pure javascript solution, just shout..
Solution without using jquery:
Remove onchange from your inputs, as onchange wont be fired until the user leaves (blur) the field.
Add onkeyup="changeBackground(this)" for each input field
Add this javascript function to your page:
changeBackground = function(source) {
if (/^[a-f0-9]{3}|[a-f0-9]{6}$/.test(source.value)) { // test for a valid hex color
var boxId = source.id.replace('color', 'box');
document.getElementById(boxId).style.backgroundColor = '#'+source.value;
}
}
Here is this fiddle to test.
How about this:
onchange="document.getElementById('box' + this.id.charAt(this.id.length - 1 )).style.backgroundColor = this.value;"
Also, you have two </form> closing tags. I'd get rid of the first one.