how to make an input like on the google site? I need that after entering the texts and in the input, Google opens with the desired request.
on JAVASCRIPT
google's input
1
2
my input(html)
<input class="finder" type="search" placeholder="Search in Google">
You can add an event listener to let's say a button.
When that button is clicked, the value in your search field will be added to the end of a Google search link.
However, since you can expect people to type sentences (and urls don't use spaces), you can use replace() to replace all spaces with, in our case, a + (url format for spaces is %20, but spaces in queries are commonly replaced with a + character).
Lastly, you can use window.open(), to open a new window that uses our link.
UPDATE: You can use a keypress as a trigger for the eventlistener, and then check if the entered key is an "Enter", that way you don't need a button.
Here's an example:
SEARCH_GOOGLE_VALUE is the textfield the user can type
const SEARCH_GOOGLE_VALUE = document.getElementById('SEARCH_GOOGLE_VALUE');
SEARCH_GOOGLE_VALUE.addEventListener("keypress", (keyboard) => {
if (keyboard.key == "Enter") {
let value = SEARCH_GOOGLE_VALUE.value;
value = value.replace(' ', '+');
let link = "https://www.google.com/search?q=" + value;
window.open(link);
}
});
if you mean redirect to a google page after input this would work
document.querySelector('.finder').addEventListener('focusout',function(){
location.replace("https://www.google.com/search?q=" + document.querySelector('.finder').textContent);
});
this will send the user to a google page with the needed requests when they leave the input fild
if you need to make something simular but on your oun website the best option would be to send the user to a nother page with the query data in the url and some back end to construct and return a needed page.
or you could send a fetch and get info back on focus out
Related
I want to automate canva.com site, using python's selenium library.
What I need to do ?
I need to insert data to fields inside canva (very simple). To force canva save my changes I need firstly DoubleClick the element, and only then update the text.
What is my problem ?
After I double click the element, it's changing ... and I can't change that python element's text. to change it, I need to find that element again and only than change it. - I Got an error that the element is not attached to the page.
def get_report_params_fields(driver, keys):
fields = {}
all_paragraphs = driver.find_elements_by_tag_name("p")
for paragraph in all_paragraphs:
key = re.sub(' +', ' ', paragraph.text.upper()).split(":")[0]
if key in keys:
if key in fields.keys():
fields[key].append(paragraph)
else:
fields[key] = [paragraph]
return fields
# update fields list
canva_fields = get_report_params_fields(driver)
# click the field to change
canva_fields[canva_key][task_index].click()
canva_fields[canva_key][task_index].click()
# update fields list
canva_fields = get_report_params_fields(driver)
# update the data
value = key + ": " + keys[key]
driver.execute_script("arguments[0].textContent = arguments[1];", canva_fields[canva_key][task_index], value)
The problem is that the get_report_params_fields (which just goes over all the paragraphs on the page and select the one I need) function is not efficient, so I want to use it only once.
So I am searching for a way to get the webelement I click using another way (using it's xpath, location, some other unique id of the webelement). I mean I need an option to find the same element again using the webelement properties, Without known the properties before (like checking the xpath in chrome, and I can't use the element's text because it is changing from time to time).
I thought about double clicking and changing the text inside oneliner javascript script, but I didn't found a way to do that.
I'm pretty new to Javascript, so I figured I'd start on a Text Based Game to start out. What I need to do, is to be able to detect when the game is waiting for a command, and when the game is waiting for an answer. Here's what I've got.
var textIn = document.getElementById('input-textbox');
var textOut = document.getElementById("output-textbox");
function process(input) {
var command = input.split(" ")[0];
if(command == "help") {
return "Help dialog";
}else{
return "Unknown command: " + input + ". Please type /help for a list of commands.";
}
}
function go() {
var input = textIn.value;
textIn.value = "";
output(process(input));
}
function output(text){
textOut.value += text + "\n";
}
function createPlayer(){
output("Please Type Your Name")
// Wait for player response and set it as a variable.
}
createPlayer();
What would be the best way to implement this?
You have a few options, you could use onclick and have a button that the user clicks and then call your functionality to fill in the answer for your HTML answer (id="output-textbox" in your example)<-- My vote *.
... or you could choose to check on which element is focused or if tab/enter is hit while in the input box and then put your answer field after the tab/enter is hit. I think the latter method, you should have a HTML5 placeholder attribute to say "hit tab{enter} when finished" or something along those lines and then check for the tab while focused on the element -- this could be accomplished with jQuery selectors or override the current focus method for that input element or potentially use document.activeElement to see what is focused on and then if it is the answer that is focused on and the input isn't blank fill it in, etc, etc, etc.
*If you are new to Javascript, I say have two buttons (one labeled 'answer' and one labeled 'clear'), and then use the onclick attribute for HTML button elements to call a Javascript method easily. This will get you started and be more straightforward, double check what you have works for DOM manipulation and move forward to having less buttons and more sleek DOM manipulation.
Good luck!
A very simple implementation is to use a form with a submit listener that cancels submission if all goes to plan. A user can enter text into the input and see the result in the textarea.
The textarea is disabled so users can't enter text into it but script can. Users can enter input then just press enter, or tab to the submit button and press enter, or click the submit button. The script runs on submit, and cancels it so they stay on the same page.
If scripting is disabled, the form will submit and you can handle things at the server.
<form onsubmit="go(); return false;">
<input id="input-textbox">
<textarea id="output-textbox" rows="20" cols="50" disabled></textarea>
<input type="submit" value="Ask question">
</form>
Im just wondering how I go about catching the event when the user is typing into a text input field on my web application.
Scenario is, I have a contacts listing grid. At the top of the form the user can type the name of the contact they are trying to find. Once there is more than 1 character in the text input I want to start searching for contacts in the system which contain those characters entered by the user. As they keep typing the data changes.
All it is really is a simple type ahead type functionality (or autocomplete) but I want to fire off data in a different control.
I can get the text out of the input once the input has lost focus fine, but this doesnt fit the situation.
Any ideas?
Thanks
Use the keyup event to capture the value as the user types, and do whatever it is you do to search for that value :
$('input').on('keyup', function() {
if (this.value.length > 1) {
// do search for this.value here
}
});
Another option would be the input event, that catches any input, from keys, pasting etc.
Why not use the HTML oninput event?
<input type="text" oninput="searchContacts()">
I would use the 'input' and 'propertychange' events. They fire on cut and paste via the mouse as well.
Also, consider debouncing your event handler so that fast typists are not penalized by many DOM refreshes.
see my try:
you should put .combo after every .input classes.
.input is a textbox and .combo is a div
$(".input").keyup(function(){
var val = this.value;
if (val.length > 1) {
//you search method...
}
if (data) $(this).next(".combo").html(data).fadeIn(); else $(this).next(".combo").hide().html("");
});
$(".input").blur(function(){
$(this).next(".combo").hide();
});
What I am trying to achieve is to force a textbox to start with a prefix ( country telephone code ) and to make this permanent, meaning that the user cannot bypass this. For example, the Phone textbox should always start with "+45" and after that the user can add the phone number. How to prevent it from deleting the code, by any means?
What I done so far, using jQuery:
//attach event on phone text boxes
$(document).delegate(".phone", "keyup", function(event){
var target = $(this);
var value = target.val().trim();
if (value.indexOf(CONSTANTS.DANISH_PHONE_CODE) == -1) {
//country code not found
//if the user starts deleting the country code
if (value.indexOf("+") == 0){
value = "";
}
//if the user types something in front of the country code, put the country code at the end
value = value.replace(CONSTANTS.DANISH_PHONE_CODE, "");
//phone doesn't start with +45
value = CONSTANTS.DANISH_PHONE_CODE + value;
target.val(value);
}
});
But the problem is that the user can delete the plus sign and the prefix is put automatically at the start so we will have +4545. Do you know an elegant way of achieving this? Thanks.
You can absolutely position the text (in a span) over the textbox and add a left-margin to it.
This way users won't be able to remove it. But you'll have to add it server side.
Add the +45 as static html before the field. Required the user to enter "the rest" of the number (not the +45).
If necessary, add the +45 server side before persisting the value. Similarly, remove the +45 when editing.
JSFiddle Example
This should actively keep them from deleting "+45" instead of trying to fix the problem after the user as changed it. Upon keypress, determine character position, if the position is too early in the string (i.e. inside the "+45" as oppose to after it) then don't allow the keypress, unless that key is the left or right arrow keys.
Acquired resources:
http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea
Binding arrow keys in JS/jQuery
Here is the UI scenario I'm trying to develop:
There is a text box field below which there are two buttons. On clicking the first button , there will be a popup in which the user will have to add a IP address. On pressing submit on the popup , the IP address will be displayed in the text area. The user can keep on adding IP addresses, which will be visible on the text area in different lines.
The user should be able to select a particular IP address from the box and delete it using the second button.
The user should not be able to enter data directly into the text field. Any ideas ?
I would suggest you keep clear of using a <textarea> since this involves sniffing selections etc. Instead, use simple container elements (e.g., <li>s in a <ul>/<ol> cf. #David Thomas' comment) to hold the entered IP addresses (one each).
I trust you'll get the idea from this JsFiddle.
HTML
<ul id="addresses"></ul>
<hr />
Add...
JS (Assuming jQuery. You would need some framework to handle selections too.)
var deleteHandler = function() {
$(this).parent().remove();
}
$("#add").click(function() {
var ip = prompt("Enter IP:");
if (ip) {
var $deleteIp = $("<a />", {"class": "delete"})
.text("X")
.click(deleteHandler);
$("<li />")
.text(ip)
.append($deleteIp)
.appendTo("#addresses");
}
return false;
});
Just a demo — deemed to be a candidate for improvements :)