Не работает метод .focus() на input элемент (JS)

Question

Навожу на тег input и ввожу в консоль.

$0.focus();

Ничего не происходит. Сам элемент видит:

Как сделать, чтобы input фокусировался? (как на скрине ниже - нажал вручную)

Код сайта:

document.querySelector("input.col-12.my-0.mb-3.mb-md-0.flex-auto.form-control.f4-mktg.width-full.rounded-md-right-0").focus();

element.style {
    height: 3rem;
}
:root, [data-color-mode=light][data-light-theme*=light], [data-color-mode=dark][data-dark-theme*=light] {
    --color-mktg-btn-shadow-outline: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
    --color-mktg-btn-bg: #1b1f23;
    --color-mktg-btn-shadow-focus: rgba(0, 0, 0, 0.15) 0 0 0 4px;
    --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
    --color-mktg-btn-shadow-hover-muted: rgba(0, 0, 0, 0.7) 0 0 0 2px inset;
: ;
}
:root, [data-color-mode=light][data-light-theme*=light], [data-color-mode=dark][data-dark-theme*=light] {
    --color-mktg-btn-shadow-outline: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
    --color-mktg-btn-bg: #1b1f23;
    --color-mktg-btn-shadow-focus: rgba(0, 0, 0, 0.15) 0 0 0 4px;
    --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
    --color-mktg-btn-shadow-hover-muted: rgba(0, 0, 0, 0.7) 0 0 0 2px inset;
}
:root, [data-color-mode=light][data-light-theme*=light], [data-color-mode=dark][data-dark-theme*=light] {
    --color-mktg-btn-shadow-outline: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
    --color-mktg-btn-bg: #1b1f23;
    --color-mktg-btn-shadow-focus: rgba(0, 0, 0, 0.15) 0 0 0 4px;
    --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
    --color-mktg-btn-shadow-hover-muted: rgba(0, 0, 0, 0.7) 0 0 0 2px inset;
}
:root, [data-color-mode=light][data-light-theme*=light], [data-color-mode=dark][data-dark-theme*=light] {
    --color-mktg-btn-shadow-outline: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
    --color-mktg-btn-bg: #1b1f23;
    --color-mktg-btn-shadow-focus: rgba(0, 0, 0, 0.15) 0 0 0 4px;
    --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
    --color-mktg-btn-shadow-hover-muted: rgba(0, 0, 0, 0.7) 0 0 0 2px inset;
}
:root, [data-color-mode=light][data-light-theme*=light], [data-color-mode=dark][data-dark-theme*=light] {
    --color-mktg-btn-shadow-outline: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
    --color-mktg-btn-bg: #1b1f23;
    --color-mktg-btn-shadow-focus: rgba(0, 0, 0, 0.15) 0 0 0 4px;
    --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
    --color-mktg-btn-shadow-hover-muted: rgba(0, 0, 0, 0.7) 0 0 0 2px inset;
}
:root, [data-color-mode=light][data-light-theme*=light], [data-color-mode=dark][data-dark-theme*=light] {
    --color-mktg-btn-shadow-outline: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
    --color-mktg-btn-bg: #1b1f23;
    --color-mktg-btn-shadow-focus: rgba(0, 0, 0, 0.15) 0 0 0 4px;
    --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
    --color-mktg-btn-shadow-hover-muted: rgba(0, 0, 0, 0.7) 0 0 0 2px inset;
}
:root, [data-color-mode=light][data-light-theme*=light], [data-color-mode=dark][data-dark-theme*=light] {
    --color-mktg-btn-shadow-outline: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
    --color-mktg-btn-bg: #1b1f23;
    --color-mktg-btn-shadow-focus: rgba(0, 0, 0, 0.15) 0 0 0 4px;
    --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
    --color-mktg-btn-shadow-hover-muted: rgba(0, 0, 0, 0.7) 0 0 0 2px inset;
}
:root, [data-color-mode=light][data-light-theme*=light], [data-color-mode=dark][data-dark-theme*=light] {
    --color-mktg-btn-shadow-outline: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
    --color-mktg-btn-bg: #1b1f23;
    --color-mktg-btn-shadow-focus: rgba(0, 0, 0, 0.15) 0 0 0 4px;
    --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
    --color-mktg-btn-shadow-hover-muted: rgba(0, 0, 0, 0.7) 0 0 0 2px inset;
}
:root, [data-color-mode=light][data-light-theme*=light], [data-color-mode=dark][data-dark-theme*=light] {
    --color-workflow-card-bg: var(--bgColor-default, var(--color-scale-white));
    --color-workflow-card-header-shadow: rgba(0, 0, 0, 0);
    --color-bg-discussions-row-emoji-box: rgba(209, 213, 218, 0.5);
    --color-notifications-row-read-bg: var(--bgColor-muted, var(--color-canvas-subtle));
    --color-notifications-row-bg: var(--bgColor-white, var(--color-scale-white));
    --color-calendar-halloween-graph-day-L1-bg: #ffee4a;
    --color-calendar-halloween-graph-day-L2-bg: #ffc501;
    --color-calendar-halloween-graph-day-L3-bg: #fe9600;
    --color-calendar-halloween-graph-day-L4-bg: #03001c;
    --color-calendar-winter-graph-day-L1-bg: #B6E3FF;
    --color-calendar-winter-graph-day-L2-bg: #54AEFF;
    --color-calendar-winter-graph-day-L3-bg: #0969DA;
    --color-calendar-winter-graph-day-L4-bg: #0A3069;
    --color-calendar-graph-day-bg: #ebedf0;
    --color-calendar-graph-day-border: rgba(27, 31, 35, 0.06);
    --color-calendar-graph-day-L1-bg: #9be9a8;
    --color-calendar-graph-day-L2-bg: #40c463;
    --color-calendar-graph-day-L3-bg: #30a14e;
    --color-calendar-graph-day-L4-bg: #216e39;
    --color-calendar-graph-day-L1-border: rgba(27, 31, 35, 0.06);
    --color-calendar-graph-day-L2-border: rgba(27, 31, 35, 0.06);
    --color-calendar-graph-day-L3-border: rgba(27, 31, 35, 0.06);
    --color-calendar-graph-day-L4-border: rgba(27, 31, 35, 0.06);
    --color-user-mention-fg: var(--fgColor-default, var(--color-fg-default));
    --color-mktg-btn-shadow-outline: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
    --color-marketing-icon-primary: #218bff;
    --color-marketing-icon-secondary: #54aeff;
    --color-project-header-bg: #24292f;
    --color-project-sidebar-bg: var(--bgColor-white, var(--color-scale-white));
    --color-project-gradient-in: var(--bgColor-white, var(--color-scale-white));
    --color-project-gradient-out: rgba(255, 255, 255, 0);
    --color-diff-blob-selected-line-highlight-mix-blend-mode: multiply;
    --color-text-white: var(--fgColor-white, var(--color-scale-white));
}
:root, [data-color-mode=light][data-light-theme*=light], [data-color-mode=dark][data-dark-theme*=light] {
    color-scheme: light;
}
[data-color-mode="light"][data-light-theme="light"], [data-color-mode="light"][data-light-theme="light"] ::backdrop, [data-color-mode="auto"][data-light-theme="light"], [data-color-mode="auto"][data-light-theme="light"] ::backdrop {
    --topicTag-borderColor: #ffffff00;
    --highlight-neutral-bgColor: #fff8c5;
    --page-header-bgColor: #f6f8fa;
    --diffBlob-addition-fgColor-text: #1f2328;
    --diffBlob-addition-fgColor-num: #1f2328;
    --diffBlob-addition-bgColor-num: #d1f8d9;
    --diffBlob-addition-bgColor-line: #dafbe1;
    --diffBlob-addition-bgColor-word: #aceebb;
    --diffBlob-deletion-fgColor-text: #1f2328;
    --diffBlob-deletion-fgColor-num: #1f2328;
    --diffBlob-deletion-bgColor-num: #ffcecb;
    --diffBlob-deletion-bgColor-line: #ffebe9;
    --diffBlob-deletion-bgColor-word: #ff818266;
    --diffBlob-hunk-bgColor-num: #54aeff66;
    --diffBlob-expander-iconColor: #636c76;
    --codeMirror-fgColor: #1f2328;
    --codeMirror-bgColor: #ffffff;
    --codeMirror-gutters-bgColor: #ffffff;
    --codeMirror-gutterMarker-fgColor-default: #ffffff;
    --codeMirror-gutterMarker-fgColor-muted: #636c76;
    --codeMirror-lineNumber-fgColor: #636c76;
    --codeMirror-cursor-fgColor: #1f2328;
    --codeMirror-selection-bgColor: #54aeff66;
    --codeMirror-activeline-bgColor: #afb8c133;
    --codeMirror-matchingBracket-fgColor: #1f2328;
    --codeMirror-lines-bgColor: #ffffff;
    --codeMirror-syntax-fgColor-comment: #24292f;
    --codeMirror-syntax-fgColor-constant: #0550ae;
    --codeMirror-syntax-fgColor-entity: #8250df;
    --codeMirror-syntax-fgColor-keyword: #cf222e;
    --codeMirror-syntax-fgColor-storage: #cf222e;
    --codeMirror-syntax-fgColor-string: #0a3069;
    --codeMirror-syntax-fgColor-support: #0550ae;
    --codeMirror-syntax-fgColor-variable: #953800;
    --header-fgColor-default: #ffffffb3;
    --header-fgColor-logo: #ffffff;
    --header-bgColor: #24292f;
    --header-borderColor-divider: #57606a;
    --headerSearch-bgColor: #24292f;
    --headerSearch-borderColor: #57606a;
    --data-blue-color: #006edb;
    --data-blue-color-muted: #d1f0ff;
    --data-auburn-color: #9d615c;
    --data-auburn-color-muted: #f2e9e9;
    --data-orange-color: #eb670f;
    --data-orange-color-muted: #ffe7d1;
    --data-yellow-color: #b88700;
    --data-yellow-color-muted: #ffec9e;
    --data-green-color: #30a147;
    --data-green-color-muted: #caf7ca;
Show all properties (510 more)
}
.f0-mktg, .f1-mktg, .f2-mktg, .f3-mktg, .f4-mktg, .f5-mktg, .f6-mktg {
    font-feature-settings: unset;
}
.f4-mktg {
    font-size: 16px !important;
    line-height: 24px !important;
}
.f0-mktg, .f1-mktg, .f2-mktg, .f3-mktg, .f4-mktg, .f5-mktg, .f6-mktg {
    font-family: "Mona Sans", "Mona Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-feature-settings: "ss02" on, "ss01" on;
    font-weight: var(--base-text-weight-normal, 400);
}
@media (min-width: 768px) {
    .mb-md-0 {
        margin-bottom: 0 !important;
    }
}
.mb-3 {
    margin-bottom: var(--base-size-16, 16px) !important;
}
.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.width-full {
    width: 100% !important;
}
.flex-auto {
    flex: auto !important;
}
@media (min-width: 768px) {
    .rounded-md-right-0 {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}
.col-12 {
    width: 100%;
}
.form-control, .form-select {
    padding: 5px 12px;
    font-size: 14px;
    line-height: 20px;
    color: var(--fgColor-default, var(--color-fg-default));
    vertical-align: middle;
    background-color: var(--bgColor-default, var(--color-canvas-default));
    background-repeat: no-repeat;
    background-position: right 8px center;
    border: 1px solid var(--control-borderColor-rest, var(--color-border-default));
    border-radius: 6px;
    box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
    transition-property: color, background-color, box-shadow, border-color;
}
[data-color-mode] {
    color: var(--fgColor-default, var(--color-fg-default));
    background-color: var(--bgColor-default, var(--color-canvas-default));
}
input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, input {
    overflow: visible;
}
button, input, select, textarea {
    font: inherit;
    margin: 0;
}
* {
    box-sizing: border-box;
}
user agent stylesheet
input:not([type="image" i], [type="range" i], [type="checkbox" i], [type="radio" i]) {
    overflow-clip-margin: 0px !important;
    overflow: clip !important;
}
user agent stylesheet
input[type="email" i] {
    padding-block: 1px;
    padding-inline: 2px;
}
user agent stylesheet
input:not([type="file" i], [type="image" i], [type="checkbox" i], [type="radio" i]) {
}
user agent stylesheet
input {
    font-style: ;
    font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-variant-alternates: ;
    font-variant-position: ;
    font-weight: ;
    font-stretch: ;
    font-size: ;
    font-family: ;
    font-optical-sizing: ;
    font-size-adjust: ;
    font-kerning: ;
    font-feature-settings: ;
    font-variation-settings: ;
    text-rendering: auto;
    color: fieldtext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    -webkit-rtl-ordering: logical;
    cursor: text;
    background-color: field;
    margin: 0em;
    padding: 1px 0px;
    border-width: 2px;
    border-style: inset;
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
    padding-block: 1px;
    padding-inline: 2px;
}

<div class="d-flex flex-column flex-md-row flex-items-center">
          <input data-color-mode="light" data-light-theme="light" data-dark-theme="dark" class="col-12 my-0 mb-3 mb-md-0 flex-auto form-control f4-mktg width-full rounded-md-right-0" style="height: 3rem" placeholder="[email protected]" type="email" name="user_email" id="user_email" autocomplete="off" spellcheck="false" required="">
          <input type="hidden" name="source" value="form-home-signup">
          <button class="btn-mktg width-full width-md-auto mb-3 mb-md-0 rounded-md-left-0 home-campaign-signup-button btn-signup-mktg" data-analytics-event="{&quot;category&quot;:&quot;Home campaign&quot;,&quot;action&quot;:&quot;click to Sign up for GitHub&quot;,&quot;label&quot;:&quot;ref_page:/;ref_cta:Sign up for GitHub;ref_loc:hero&quot;}" type="submit">
  Sign up for GitHub
  
  
</button>
        </div>

Answer 1

Попробуйте перезагрузить страницу и на этот раз сразу писать $0.focus();, потому что первый раз когда было написано $0.focus;, скорее всего либо создалось свойство, либо перезаписалась функция фокуса на пустую и последующий вызов конечно ничего не дал

БЛОГ НА HUSL

Не работает метод .focus() на input элемент (JS)

Ответы (1 шт):