I am trying to find a way to get more than one characters pasted on html text field (input type=text), using onkeydown or onkeypress, I am NOT interested in onkeyup(it works), so please do not suggest me this solution. Also I am not interested in Jquery, I do not like to use it. I need solution to work with all browsers.
I am able to do that if you type one character, by taking the character of the event, but till now I am unable to get group of characters come from the paste (ctrl+V) or by mouse.
You can look at Facebook search menu that shows auto complete results, it works on events: onkeydown and onkeypress and you notice that you get the result before you release your finger, try to paste something (more than one character) and you get the result before releasing finger, how? Onkeypress and onkeydown do not show first thing you paste or type because they happen before the text being added to text field.
If you want to understand what I want more, please check my code below:
<input type="text" id="targetTextField" onkeydown="CapturePastedString(this.id)" />
<script>
function CapturePastedString(id){
var targetTextField=document.getElementById(id);
// below I need to capture the pasted string like:
var pasted_string= function(){.....}
targetTextField.value=pasted_string;
}
</script>
Any help would be so thankful, because since long time I am trying but cannot find solution yet.
Try the onkeydown handler it works.You can get the keyCode from there and then the key.
<input type="text" value="" onkeydown="alert(String.fromCharCode(event.keyCode));"/>
Note that since all characters on the keyboard are capital you would also get capital letter. The above code would display the key pressed
Related
i scraped datas from a website using Python. The results are great.
Just the after-work-party is something annoying.
The HTML source code is (of course) messed up with various kind of div class="abc123"> tags.
Do we have an Excel geek-trick to remove them quickly?
I search a <div ...> tag manually and remove the specified one via search'n replace function.
After I jump to the next div tag and so on....
Isn't it a little bit too much of the "good old school" way to remove it?
Of course, there are some online services (free and paid) to do that, but I'm sure we have a trick in Excel, I just can't get it out right now. And using external services like an online tool for cleaning HTML code is again a extra workload - unnecessary.
After experimenting around with some RegEx I was able to solve my problem:
Pressing Ctrl + H for opening Find and Replace then entering my pattern <div *> and replacing it with - whatever:
Find what: <div *>
Replace with:
That's it. Finally.
With Excel Power query its possible to pull data from a website provided its in a database/table format.
Many online databased are so large however that they implement a search function instead of showing the entire database which is fine but causes a barrier when trying to efficiently locate information for many keywords.
The database I wish to search is:
https://apps.who.int/food-additives-contaminants-jecfa-database/search.aspx
Is it possible to create a list of keywords/CAS numbers and search the database for each of these sequentially and return data found? This is similar to web scraping but with the added step of actually searching for the data beforehand.
It's totally possible to acheive what you want.
First you analyze the page, specifically the input box and the submit button and find what's identify them. I use Chrome Development Tools for this. Just open the desired page and press F12.
In this case the input box is:
<input name="ctl00$ContentPlaceHolder1$txtSearch" type="text" id="ContentPlaceHolder1_txtSearch">
and the submit button is:
<input type="submit" name="ctl00$ContentPlaceHolder1$btnSearch" value="Search" id="ContentPlaceHolder1_btnSearch">
You can then use the ids to address the box with javascript:
var inputBox = document.getElementById('ContentPlaceHolder1_txtSearch');
inputBox.value = 'your search string';
And the equivalent for the submit button:
var searchButton = document.getElementById('ContentPlaceHolder1_btnSearch');
searchButton.click(); // Start the search
When the results are delivered you then need to analyze that page to figure out what javascript code is needed to extract the part of that page that you're interrested in. Or you can dump the complete page with:
document.documentElement.outerHTML;
Excel VBA example code for running javascript on a webpage here:
https://github.com/peakpeak-github/libEdge
Modify the code to suit your needs.
I am having some problems getting CodeMirror to indent the code at the beginning of a new line.
I have a text area, and when I hit save, the code that is saved to the DB is something like:
<meta charset=\"utf-8\">\r\n\t\t\t<title></title>\r\n\r\n<div class=\"wra ... etc
But when I read that out and do in the code behind in asp.net, ViewCode.Text = dbModel.ViewCode ... i.e. try to assign that string to the textarea which will then be 'converted' into the code mirror editor with relevant js on the page, the indent at the start of new lines is lost. If I indent half way along a line however, those render.
Also, if there is a new line return and then a blank row and then more text, the blank row gets lost when read back out to the text area.
Note: the textarea is runat server to fill the value from the database. I have tried with divs and literals but can't get it working.
So how can I save something like:
<div>
<b>
test
</b>
</div>
and not get it back like
<div>
<b>
test
</b>
</div>
I presume I have to encode it on save but I swear I have tried all encoding methods and now work! lol
Any pointers would be appreciated.
Cheers
Robin
Update/Solution
I have come back to put this in, in case some one stumbles across this post.
Basically I could not still not get the following to play nicely on the particular page in question. I.e.
Code behind
ViewCode.Value = dbModel.ViewCode
where
dbModel.ViewCode
// --> is comes from db as e.g.:
// <meta charset=\"utf-8\">\r\n\t\t\t<title></title>\r\n\r\n<div class=\"wra ... etc
JS (at end of page)
<script>
var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("ViewCode"), {
lineNumbers: true
});
</script>
What I did get working however, is if you put the same JS code on the page, however, do NOT fill the text area from the code behind. Then I just make a simple ajax call to a page method to get the data (on page load).
$.ajax({
url: '/WidgetMaint.aspx/GetFileHTML',
type: 'Get',
contentType: 'application/json',
data: { tempid: id },
success: function(result) {
myCodeMirror.setValue(result.d);
}
});
The save and everything else works perfectly because the textarea is still run at server, so can still get its value 'on save', as code mirror takes care of this.
I am fairly sure that there is something else in the pipeline which is stuffing around with the text and 'formatting' it different before code mirror can get to it in time in the first attempt I was doing. However, with the ajax call the problem goes away because the browser/framework/whatever does not have any opportunity to access the string the DB returns. It is feed straight to the instance of code mirror which deals with it.
So in case you are having a similar problem, might be easier to change approach....
Cheers
Robin
Note: accepted answer by Eliran as it gave me this idea, and upvoted Marjin, because that comment proved it code mirror can handle indents...
I would advice you to drop that textarea and keep a live instance of CodeMirror on the page. That way you can assign the response directly to that instance using the CodeMirror API.
Take a look at doc.setValue(content: string) in particular, that should get you on the right track.
This question regards website programming. My primary languages are c++/c# and I don't know much about web development, except that say I understand html and css. That's why I'm looking for a relatively simple solution, preferably something out of the box. I don't have any experience with JavaScript, but for the sake of this project I'm willing to learn it if necessary.
Let's say I have a database, where each entry is about a book. It contains the fields: title, author(s) and publication date.
I would like to create a simple website with a search box that has this dynamic result feature, so that you get suggestions after you type in a few letters. All those suggestions, as well as search results, need to be based purely on the database.
This could be a static website or based on any Content Management System, I'm familiar with Joomla, but was unable to find an out-of-the box component that would do just that. All those search modules search the entire website and I only need to search the database.
Probably I can help you with how to implement this feature. We used to call this feature as autocomplete menu.
First you decide minimum characters to populate autocomplete menu. For example 2
By using javascript you write keyup event. Once the characters count reaches to the minimum character count. You send AJAX request to the server.
The server should process this request and do the database search and form a json or xml response or plain text to the client.
The client parses that response into javascript object and construct a dynamic html for autocomplete menu with the data and render it into the DOM hence display's just below the search text box.
Now if you want to display the first result inside the textbox as you type. Here is the method I can suggest as similar as google search box
Place one label or span just below the input text box. By using css make its position exactly match with the position of the text box. Make sure the starting of text of both input text and label matches. Make the text color of the label less brighter than the font color of text. The font size and font family of the label should match the input text field's style. Now by using Javascript display the first or most matched text inside the label. Please find the sample code below
<!DOCTYPE html>
<head>
<style>
label {
position:relative;
}
body, input {
font-family: 'verdana';
font-size: 12px;
}
</style>
</head>
<html>
<body>
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="Matched Text" /><br>
<label> Matched Text</label><br>
</form>
</body>
</html>
I am new to Watir automation testing and would like to get some help for the drop down.On our website we have a state drop down where you enter the first letter of the state (in my example C for California) and it narrows it down to the all states starting with C. Once you have the list you need to click on the correct state. But I am having difficulties selecting the correct state.
(Below is the html from our website:
<div class="x-form-field-wrap x-trigger-wrap-focus" id="ext-gen202" style="width: 166px;">
<input type="hidden" id="entityStateCode" name="entityStateCode" value="">
<input type="text" id="ext-comp-1005" autocomplete="off" size="24" class=" x-form-text x-form-field x-form-focus">
I used the following to automate the scenario but none of these are giving me what i am looking for:
#browser.text_field(:id,"ext-comp-1005").value=("CA")
#browser.text_field(:id,"ext-comp-1005").set("CA")
#browser.text_field(:id=> "ext-comp-1055",:index => 5).set "CA"
I really appreciate that if you can point me to the right direction.
Thanks
I ran into a similar situation before. In my situation there was a TABLE inside the DIV which had a separate row for each item in the dynamic drop down. So, if that's the case for you then you would need to use something like this to access the items:
#browser.text_field(:id,"ext-comp-1055").set "C"
table = #browser.div(:id, "ext-gen336").table(:index, 1)
puts "First entry value: #{table[1][1].text}"
table[2][1].click # second entry
Try printing out the HTML for the DIV at runtime to see the specifics of what you need to interact with if that doesn't work.
You did not tell what the problem is, this is not enough:
none of these are giving me what i am
looking for
This should enter CA into text field:
browser.text_field(:id => "ext-comp-1005").set("CA")
If it is entering text into wrong text field, change :id => "ext-comp-1005".
If it is entering text into the correct text field, but list of states does not appear, you probably have to fire some javascript event. Take a look at How to find out which JavaScript events fired? question.