I have developed one website which has a chat feature. Every time I click the text input I see the "key" / black bar from chrome which is used to store and configure passwords.
I have no idea why that bar is shown because the input type is text and not password
<input
className="form-control"
type="text"
placeholder={i18n.msgInputPlaceholder}
onKeyDown={onChatKeyDown}
onChange={onMessageChange}
/>
This is very bad for the user experience and I want to get rid of the bar. You can see from my screenshoot that it takes a lot of space and blocks other content like the message that I want to be visible.
At best case, I want the keyboard to not show the black bar and push the other content up like it is doing, so the text input is still shown and also the remaining messages.
Any ideas how to do it?
Thanks in advance
Related
I was working with the ability to paste images into a div where it would then be uploaded via a post request. So far it seems to be working, but I noticed this toolbar that seems to show up when I make the content editable. As a result of this, the user is able to manipulate the div beyond just pasting an image which is what I do not want them to do.
<div tabindex="1" id="pasteZone" contenteditable="true" onkeypress="return false">
<span id="pasteMessage">Right click and paste an image, or click and press (ctrl+v for windows or ⌘+V for Mac)</span>
</div>
I need the paste zone to be editable so that the windows context menu allows for the option to paste the screenshot and have the option to ctrl+v or what have you. But I also do not want my users to be able to add text. It seems that I am able to do that successfully as far as key presses go, but the toolbar destroys that possibility.
What I have done:
I looked online to see if other examples of this occurred but I could not find anything on this particular issue. I checked to see if this was the standard for any contenteditable enabled div, but it is not. Other websites that have this do not show this toolbar.This leads me to believe that this has something to do with Bootstrap. If this is the case, how would I prevent this toolbar from showing?
Image:
I recently added a location search field on my site which shows suggestions based on what you type, but on Microsoft edge, a menu pops up on clicking on the input field. How can I disable this menu from appearing on just this input field of my site?
Based on the image you provided, I think this should be caused by some default settings in Edge. If you want to turn off this prompt, just navigate to: edge://settings/personalinfo in Edge and disable this feature like this image below:
I had today the same problem. I had input field without label and empty placeholder. Setting placeholder"..." and making the placeholder transparent makes that edge does not anymore offer "type / ..."
Hth
I believe what you're looking for is:
spellcheck="false" autocomplete="off" aria-autocomplete="none"
The aria-autocomplete seems to prevent that box from popping up and the spellcheck seems to also stop the spell checker one from displaying.
There are places where autocomplete and spellcheck would come in handy, but NOT in single-line fields like email, website, or an <input> where I have my own Bootstrap dropdown-menu/dropdown-item list that displays retrieved DB records via AJAX as the user types (in this case, the Edge popups were ovelaying my DropDown list).
Anyway, adding this code to the <input class="whatever" id="whatever" spellcheck="false" autocomplete="off" aria-autocomplete="none" placeholder="whatever" value="whatever" > seems to solve the issue and you don't have to get all your users to change the browser attributes or mess with the placeholder. Hope this helps... :)
I am trying to create a input box somewhere on the screen in chrome, not attached to extension button like a normal popup,
it also needs to be running all the time so the user doesnt need to click the extension button to open it, for example so they do not have to come out of fullscreen.
What i have so far since im not great at html or java just a simple form
What i have: http://i.imgur.com/xCY1a41.png
What i want: http://i.imgur.com/cJH8bD4.png
I would also like to control the position of the form but from what i have above doesnt seem as if i will be able,
Sorry if its a bit vague but anything helps!
What you want to do can't be done in Chrome. This is by design. If web content could display itself outside the boundaries of the browser tab's content area, then users might be confused who was presenting it. Confusion is just the beginning of that problem: if web/extension content could masquerade as a system or browser-level alert, then that content could trick the user into doing something dangerous.
If you need a presence outside of a browser tab, your options are a native app or Chrome App.
If you want the input box to be displayed on the page you could use content script - then it would appear as you presented.
There's an extension that I use that alerts me to new mails and allows me to quickly compose mails. It's fine but if I could change one thing, it would be to make the 'compose message' window bigger. It's not big enough to display the 'to: ' textbox, let alone the textbox for the body
https://chrome.google.com/webstore/detail/multiple-account-checker/dnimhgelcnggigekhdjlifjpndgmnglm
when I click the "compose new message" button, and the "compose message" window opens, I'd like it to always be a larger size. Does that make sense?!
If anyone knows how, and can explain to a novice, I'd be very grateful. So far I've JUST managed to get kittens compiled! (http://developer.chrome.com/extensions/getstarted.html) and have many ideas I'd can't stop thinking about! thanks
I'm confused about how Chrome decides what forms to autofill. By autofill I mean the inputs are highlighted in yellow and already completely filled in when you land on the page (see picture below). I do not mean autocomplete which is where the input is blank and you get a suggestion only when you start typing in it.
Here's the autofill rules as I understand them:
If your form is located on its own url, e.g., http://mysite.com/login
Your form is present on page load and is NOT loaded via ajax
Comparing my site with Dropbox's we both have a login page: http://localhost/login vs. https://www.dropbox.com/login which satisfies rule #1. The login form gets autofilled for both of us.
My problem is with rule #2. On Dropbox's homepage, www.dropbox.com, they have a "sign in" modal (see picture below) that gets autofilled. On my homepage, http://localhost, I have an identical modal which does NOT ever get autofilled.
I can't figure what the deal is here, can someone chime in? Is it just a localhost vs. real URL issue? If so, how do you explain why http://localhost/login gets autofilled?
When you log into a new site chrome will drop down its notification bar at the top and ask you if you want to save the password, if you tell it "Never" it wont ask again and it wont ever autofill
To get form fields to autofill like street, address, etc, a good answer by kmote
How to trigger Autofill in Google Chrome?,