How to hide text present inside search box?


Tags: javascript,css,tampermonkey

Problem :

I have set a bookmark which has -adult word to search query, so that inappropriate results won't show up. Now, how do I hide -adult present in the search box?

Example:

youtube screen capture

My idea so far:

To use CSS to hide it then make another textbox to be seen, then add a few event handlers to sync the real search box with my fake search box.

comments by @wOxxOm

that's tricky to implement I suppose since google uses ajax and events, but probably it'll be possible to set a document mutation observer which will hide the stuff in the search box before it's shown

If the above method is not possible, then please suggest alternative for solving this problem.



Solution :

Remove -adult from the field and append it on the button click event. Example:

var keywordInput = $('input[name="-adult"]');
$('input[name="SearchButton"]').click(function() {
  window.location = 'http://example.com?kwd=' + encodeURIComponent(keywordInput.val());
});

    CSS Howto..

    How to draw a circle css

    How to create a row of three expandable/collapsible divs which react on hover?

    JavaScript / Jquery : How to find line-through words

    What do i need and how do I start to adjust the css of a website with “encrypted” .gz files

    How to position 3 images in two equal height columns?

    how to affect an element's width by one child element but not others using CSS

    How to add css class in aspx.cs page means code behind page

    How do I make a div not display, if the browser window is at a certain width? [duplicate]

    How can i concatenate the following css string in php without creating another variable or breaking the string?

    How to pull images out of WordPress content?

    How do i position this element relative to an image?

    how to apply the style using css3 [duplicate]

    How to “reset” a DOM subtree's CSS style?

    How to achieve a left and right background split leaving middle div visible?

    How to make CSS animation not reverse after finishing? Example inside

    How to remove jquery mobile button color or override button css?

    How to give css class to the OK button of dialog in JQuery?

    problem with internet explorer showing html input button which is hidden

    How to place 3 different paragraphs next to each other?

    Looping through my table, how do I know if the checkbox is checked?

    CSS - how to position content data-title

    Navigation Menu That Shows/Hides On Rollover and Click

    How to make div fill the rest of viewport with keeping of aspect ratio (CSS or jQuery)?

    How to alter ionic's nav-bar size?

    How to center text horizontally and vertically within box element? [duplicate]

    How to stretch a div to the viewport bottom without using absolute positioning?

    How to achieve this button-border effect with CSS? (image included)

    How do you programmatically apply a css class to an asp.net control?

    How to use :not selector in CSS?

    How to center links in header using CSS?