I'm working on a web app and users sometimes paste in things they've copy/pasted from other places and that input may come with the character (0xAD). I don't want to filter it out, I simply need the user to see that there is an invisible character there, so they have no surprises later.
Does anyone know a way to make the always be visible? To show a hyphen, rather than remain hidden? I suspect a custom web font might be needed, if so, does anyone know of a pre-existing one?
You would need to either use JavaScript or a custom typeface that has a visible glyph for the soft-hyphen character. Given the impracticalities of working with typefaces for the web (and burdening the user with an additional hundred-kilobyte download) I think the JavaScript approach is best, like so:
document.addEventListener("DOMContentLoaded", function(domReadyEvent) {
var textBoxes = document.querySelectorAll("input[type=text]");
for(var i=0;i<textBoxes.length;i++) {
textBoxes[i].addEventListener("paste", function(pasteEvent) {
var textBox = pasteEvent.target;
textBox.value = textBox.value.replace( "\xAD", "-" );
} );
}
} );
Related
When i hit Ctrl+F to find words in chrome all the letters with the search text becomes yellow.
Anyone have any idea how it is done? Am just curious to know this!
BTW i'am searching for this is to implement a functionality like this using google extensions. Right now what am doing is finding that particular text and replace it with something like below.
Original text: hello
Replaced text: '<span style="background:yellow;">hello</span>';
Any ideas?
Edit: I think browsers don't allow you to use native higlight
mechanism. But you can imitate this functionality using
Javascript/jQuery.
There are lots of javascript and jQuery plugins to do that. General idea is finding all occurrences of the given word(s) and replacing them with some HTML code. (Which have different background color or larger font size etc.) For find-replace operations, RegEx will be beneficial.
Basic, non-optimized example;
/* Instead of body you can use any container element's selector */
$('body').each(function(){
var allContent = $(this).text();
var wordsToBeHighlighted = ['Hello','World'];
wordsToBeHighlighted = $.map(wordsToBeHighlighted, function(str) {
return preg_quote(str);
});
$(this).html(allContent.replace(new RegExp("(" + wordsToBeHighlighted.join('|') + ")" , 'gi'), "<b style='color: red;'>$1</b>"));
});
function preg_quote( str ) {
return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
}
Source
I've looked through a number of posts all pointing towards different ways of using the autocomplete property, but I have yet to have this work in all my browsers. I've seen some really ugly workarounds such as this, but I'm looking for something that is clean and easy.
What is a good way to disable text field autofill on all (or at least, most) common browsers?
The following code will disable autocomplete in FF, IE, and Chrome.
<script>
$(document).ready(function () {
// IE & FF
$('input').attr('autocomplete', 'off');
// Chrome
if ( $.browser.webkit ) {
$('input').attr('autocomplete', 'new-password');
}});
</script>
Enabling Autocomplete on both form and input fields (with the "off" value) for the sake of those law-abiding browsers that do play by the rules is always a good beginning - also for the unlikely event that one day "other" browser...s may feel like compliance isn't all bad.
Until that day hacks are needed. I've noticed that Chrome looks for matching data in at least three places: Labels (contexts), Names and Placeholders. If the Name field is missing from input fields it will look in both Labels and placeholders, but if the Name field is present it will only look in Name and Placeholder.
This script utilize the "form-control" class from Bootstrap on input fields that must be guarded from Autocomplete. Use any other class or filter you like. Also assuming that Placeholders are in use - just remove that part if not.
$(document).ready(function() {
// Begin
var this_obj = null, this_placeholder = null, this_name = null;
$(".form-control").focus(function() {
this_obj = this;
this_name = $(this).prop("name");
this_placeholder = $(this).attr("placeholder");
$(this).prop("name", "NaN" + Math.random());
$(this).attr("placeholder", "...");
}).blur(function() {
$(this_obj).prop("name", this_name);
$(This_obj).attr("placeholder", this_placeholder);
});
// End
});
Note: Leaving the Placeholder empty might actually inadvertently trigger the Autocomplete function as empty assignments are apparently ignored.
The two variables this_name and this_placeholder may be avoided as they are accessible through this_obj, but I like to keep them around for the sake of readability and clarity.
The Script is erm.. quite unobtrusive, as it cleans up after itself and it only requires one matching class or attribute.
It works in Version 68.0.3440.106 (Officiel version) (64-bit), IE11 11.228.17134.0 and Firefox 61.0.2 (64-bit). Sorry, haven't tested others.
Add a class to all your input tags, suppose no-complete
And in your js file add following code:
setTimeout(function (){
$('.no-complete').val ("");
},1);
Using Ctrl-F in most browsers will allow you to search for text, but only in only the text areas. I would like to search for text in what should be accessible areas that are not necessarily text rendered areas such as <map ...><area title="searchable text" /></map> and <img alt="searchable text" />. Is there a browser or addon that will do what I'm asking for? This stuff is here for accessibility, but it doesn't seem to be really all that accessible (except by mouse hover, which again isn't all that accessible).
NOTE
An answer that is required, does not use something that is decoupled from the view. I.e. searching through the source code isn't an option as this is largely difficult to read (esp on complex pages) and doesn't show where the information is located on the rendered page.
Is there a browser or addon that will do what I'm asking for?
Oh yes. Lynx browser does it.
But I guess it's not a solution ;-)
If your question is so, there is no way to override what CTRL+F is doing in your browser.
You can design a custom plugin inside your website, or an addon for your browser. This would be quite easy... but will require other shortcut.
If your main problem is to locate tags based on their alt or title attributes content, this is quite easy in javascript:
var search='enter image';
var nodes=document.querySelectorAll("[alt*='"+search+"'],[title*='"+search+"']");
You can then highlight the matching nodes using jquery or what you want.
for (i in nodes) {
nodes[i].className+=' resultHighlighted';
}
and scroll to the first result:
nodes[0].scrollIntoView();
If you intend to create a browser plugin, you can create your custom a bookmarklet or a custom plugin, and associate a shortcut to this bookmark (see https://github.com/iSunilSV/Chrome-Bookmark-Shortcut)
A simple bookmarklet to find the first match by title or alt attribute and scroll to it will be something like that:
javascript:text=prompt("search inside alt or title attribute");
document.querySelector("[alt*='"+text+"'],[title*='"+text+"']").scrollIntoView();
In your browser, use the "View Source" or "Source Code" function, and then within that window that pops up, use the Ctrl-F for Find.
You can also use the "Inspect Element" directly on an element to split the screen into two windows- one for code and one that's rendered.
For more information, here's a sample article for Chrome:
https://support.google.com/adsense/answer/181951?hl=en
Would something like the Web Developer browser plugin work? It's available for Chrome, FF and Opera. There are a few features that toggle the display of various attributes such as title, alt and even ARIA roles. This injects the attribute text inline with the element.
In my opinion, it's not a bug; they were just not designed for this use.
As I'm sure you are aware, the alt attribute replaces the image when it's not available. So how could you scroll to something that is not always displayed? Whereas you seem to be after a permanent description; a figcaption would be more appropriate for this.
As for the title attribute, it was intended to merely clarify the purpose of a link. There should not be any new information to the user in the title; therefore I think it would be redundant to have two lots of the same information highlighted in one place.
The purpose of searching is to find text on screen, seeing as neither title or alt are always displayed I think the user would be more confused by the fact that nothing is highlighted, and that they are just taken to an image or random link/area. If the image has a figcaption that becomes highlighted, then it would make sense to them. Besides, how are they going to search for the title if they don't know what to search for? Title and alt do not come up in text displayed by search engines; the user will never know about it unless they've been to your site before, in which case they'll know where to look.
Also you state the following:
This stuff is here for accessibility, but it doesn't seem to be really all that accessible
Which, understandably, seems true to you as you probably do not need it. However alt and title are read out to those who use screen readers so isn't entirely useless.
Idea 1
I assume you have Windows and Firefox installed
I have my Firefox installed with 2 add-ons.
Install a add-on called Tile Tabs, it make it possible for example left side is web view and the same page on right side with source code.
Install add-on called Web page to source code & viceversa that make it possible to toggle between view and source code by pressing on CTRL+SHIFT+S
Since what you required is not a default thing in all nowadays browses as far as I know.
Screen shot of the solution:
Idea 2
Install FireBug, you can view/edit/debug source codes and view HTML live and what you highlight on the code will be also highlighted on the view.
Screen shot:
Note: Btw idea 1 is not only good for view / source code but it is also good to compare two views or read article to the right and answer question to the left.
You can use the search funktion in Chrome's developer tools "Elements" Tab (Press F12 -> Tab "Elements" -> Press CTRL + F) and use XPath on your searches. Example:
//*[#title="Google"]
Matches will be shown with a yellow background in the code and when you hover it, its position will be hightlited in the view.
Dev Tools "Element" Search with XPath
It is coupled with the view, allows you to see the element's position and it's also an out-of-the-box solution in Chrome (tested in Chromium 45 for Ubuntu).
Hope it helps!
Regards
EDIT
Forgot - If you want to use wildcards on your searches, you can also do it like this:
//*[contains(#title, 'Google')]
EDIT 2
For the posterity! Further research shows that your goal might be possible to achieve using the Firefox-Addon Greasemonkey, which allows you to customize the way a web page displays or behaves, by using small bits of JavaScript.
I performed several tests with this addon and could achieve a nice effect with simple images (display the ALT attribute as a DIV overlapping the image), but with area sections the thing gets a lot more complicated, as area regions can be squares, circles, and polygons with infinite coordinates plus retrieving the exact positioning of the area itself can be a bit tricky but maybe gives you or someone else a start point.
Based on the ALT Tooltips Script (http://greasemonkey-user-scripts.arantius.com/alt-tooltips-for-firefox), I created the following script and defined it in Greasemonkey:
// ==UserScript==
// #name Alt Tooltips 2
// #namespace http://www.biterion.com
// #description Alt Tooltips 2
// #include *
// #grant all
// ==/UserScript==
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while(element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
function getAreaPosition(element) {
var position = element.coords.split(',');
xPosition = position[0];
yPosition = position[1];
return { x: xPosition, y: yPosition}
}
var res = document.evaluate("//img",document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var i, el;
for (i=0; el=res.snapshotItem(i); i++) {
if(el.alt) {
alternate = el.alt
} else {
alternate = "No alt text";
}
position = getPosition(el);
var newDIV = document.createElement ('div');
newDIV.innerHTML = "<div style='position:absolute;background:yellow;color:black;top:" + position["y"] + ";left:" + position["x"] + "' id=" + i + ">" + alternate + "</div>";
document.body.appendChild(newDIV);
}
var res2 = document.evaluate("//area",document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var i2, el2;
for (i2=0; el2=res2.snapshotItem(i2); i2++) {
if(el2.alt) {
alternate2 = el2.alt
} else {
alternate2 = "No alt text";
}
position2 = getAreaPosition(el2);
var newDIV2 = document.createElement('div');
newDIV2.innerHTML = "<div style='position:absolute;background:yellow;color:black;top:" + position2["y"] + ";left:" + position2["x"] + "' id=" + i2 + ">" + alternate2 + "</div>";
document.body.appendChild(newDIV2);
}
As you can see, the script firstly detects all "img" and "area" elements, extracts its positioning and creates a new DIV element containing the "alt" attribute, which is then positioned on the upper left corner of the image.
As stated, the problem with areas is, that the positioning should be relative to the parent image and not absolute like in the script, plus the coordinates should be extracted accordingly to the type of area shape (currently only extracting the two first coordinates of each area, which will work for squares but will surely fail for other shapes).
Hope this will help someone :-D
Regards
As the title suggests, I want to actually brute-force (don't pay attention, useless information) using grease-monkey script by trying each word/alphabet I provide.
But as I think jQuery is more easier than Javascript itself , so I would also like to embed jQuery in it.
The second thing thats bugging me is to actually submit a form with a specific value.
And is there a way to store some values...like if "abcd" did not work in the input field then the page would refresh thus this un-intelligent script won't be able to detect that this word did not work already..and it will try that same "abcd" word again.
Sorry for the vague details
var lastTried = parseInt(GM_getValue("LAST", "-1")); //GM_* will not work on Chrome to the best of my knowledge, would have to use cookies in that case.
if((docIK.location.href == AddressA) || (docIK.location.href == AddressA?error)) //for example, pseudo code
{
if(lastTried < wordsToTry.length){
lastTried++;
form.data.value = wordsToTry[lastTried]; //form.data.value is more pseudo code, wordsToTry is array of the words that you are going to provide
GM_setValue("LAST", lastTried.toString());
form.submit();
}
}
else //Address B
{
//Success
}
The reason I want to use the together is that I want to hide the content like display: none does, without leaving any whitespace as visibility: hidden does.
At the same time I want the hidden content not to be copied when the user copies the entire table from the webpage, not because it is sensitive information but because the user hid the field and therefore doesn't want it copied. visibility: hidden doesn't copy but display: none does, so I have quite a dilemma.
Anyone know a solution?
Edit:
What I ended up doing was just what was suggested, save the information as Javascript (as it is not sensitive information anyways) and create/remove dynamically with Javascript.
I do not think giving the element visibility: hidden prevents the user copying the information in the table, although this may be browser specific behavior. Have a look at the test I've set up: http://jsfiddle.net/a9JhV/
The results from Firefox 3.6.8 on Windows 7 is
Copy ME! Don't copy me :( Copy ME! Copy ME!
Copy ME! Don't copy me :( Copy ME! Copy ME!
Which doesn't work as expected.
I've cooked up some code, it took the quite a bit work of cook up... have a look here: http://jsfiddle.net/a9JhV/7/
It uses jQuery to hide and show the table columns - actually removes them from the DOM, not just play around with their visibility and whatnot. Whee!
Why not remove the node from the page? You could accomplish this by using:
<script type = 'text/javascript' language = 'JavaScript'>
document.getElementById('yourDivId').innerHTML = '';
//OR
document.removeChild(getElementById('yourDivId')); //(I think this is right...document might need to be replaced by the div's parent)
</script>
You should remove the "hidden" DOM object using javascript and then recreate it again if user wants it back. Data from deleted records can be stored in session storage or hidden inputs for example.
If you want elements HIDDEN from the source, place them in a separate text file and load it using an ajax-like call... this will prevent the html from being in the source.
If you place a clear image OVER the content they also will not be able to highlight it easily (and by using javascript you can likely disable their ability to do a ctrl+a)
hope that helps!
It's a good idea to create an object to represent the table:
var myTable = function(tableName){
// If you want to assign columns dynamically you could create this.addColumn();
this.Columns = new Array(
new Array("row1","row2","row3","row4"),
new Array("row1","row2","row3","row4")
);
this.reBuild = function(){
for (col in this.Columns){
for(row in this.Columns[col]){
// put the cell in the table
}
}
};
};
I didn't test this code, it should just illustrate the gist of storing and building a table.