මට HTML5 අංක ආදානයේ භ්‍රමණ පෙට්ටිය සැඟවිය හැකිද?

1004

ටයිප් අංකයේ HTML ආදානය සඳහා සමහර බ්‍රව්සර් (ක්‍රෝම් වැනි) ලබා දෙන නව භ්‍රමණ පෙට්ටි සැඟවීමට බ්‍රව්සර් හරහා ස්ථාවර ක්‍රමයක් තිබේද? ඉහළ / පහළ ඊතල දර්ශනය වීම වැළැක්වීම සඳහා මම CSS හෝ JavaScript ක්‍රමයක් සොයමි.

<input id="test" type="number">

— ඇලන්
source

2

ඔබ භාවිතා කරන කේතයට උදාහරණයක් පළ කළ හැකිද? තිර රුවක් ද විශිෂ්ට වනු ඇත, එබැවින් ඔබ බලන්නේ කුමක් දැයි අපි දනිමු. මම <input type="number" min="4" max="8" />ක්‍රෝම් දෙස බලමින් පැත්තක ඉහළ හා පහළ ඊතල සහිත සාමාන්‍ය ආදාන ක්ෂේත්‍රයක් දකිමි.

— calvinf

79

මා දකින දේ ඔබ හරියටම දකිනවා. ජංගම බ්‍රව්සර් සුදුසු යතුරුපුවරුවක් ගෙන එන බව සහතික කිරීමට සහ පරිගණක බ්‍රව්සර්වල ඉහළ සහ පහළ ඊතල දර්ශනය වීම වැළැක්වීමට මම ටයිප් = අංක සලකුණු තබා ගැනීමට උත්සාහ කරමි.

— ඇලන්

3

ඔබ සංඛ්‍යා යෙදවුම් භාවිතා කරන්නේ නම්, නවීන iOS, ඇන්ඩ්‍රොයිඩ් සහ ඩෙස්ක්ටොප් බ්‍රව්සර් සමඟ හොඳ දෙයක් භාවිතා කිරීමට වග බලා ගන්න : <input type="number" pattern="[0-9]*" inputmode="numeric">. වැඩි විස්තර: stackoverflow.com/a/31619311/806956

— ආරොන් ග්‍රේ

1

මම කරන්නේ වාර්තා යෝජනා කරන රේඛා ඔස්සේ සලකුණු ලියන වේ <input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... > හා භාවිතා jQuery Validati වලංගු හැසිරවීමට හෝ ඒ හා සමාන. මම මෙම ප්‍රවේශය අත්හදා බලා නැත, ඒ නිසා මෙය පිළිතුරකට වඩා අදහස් දැක්වීමක් වේ.

— Agi Hammerthief

1166

මෙම CSS වෙබ්කිට් බ්‍රව්සර් සඳහා භ්‍රමණය වන බොත්තම effectively ලදායී ලෙස සඟවයි (එය ක්‍රෝම් 7.0.517.44 සහ සෆාරි අනුවාදය 5.0.2 (6533.18.5) වලින් පරීක්ෂා කර ඇත):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

<input type="number" step="0.01" />

ස්නිපටය පුළුල් කරන්න

ඔබ උනන්දුවක් දක්වන මූලද්‍රව්‍ය සඳහා ගැලපෙන CSS ගුණාංග සෙවීම සඳහා ව්‍යාජ පරීක්ෂක (වෙබ්කිට්, සමහර විට ෆයර්ෆොක්ස් සඳහා ෆයර්බග්) භාවිතා කළ හැකිය, ව්‍යාජ මූලද්‍රව්‍ය සොයා බලන්න. මෙම රූපය ආදාන මූලද්‍රව්‍ය වර්ගය සඳහා ප්‍රති results ල පෙන්වයි = "අංකය":

ආදාන වර්ගය සඳහා පරීක්ෂක = අංකය (ක්‍රෝම්)

— ඇන්ටොන්ජ්
source

26

display: none;

— ක්‍රෝම්ට

9

මෙය අවාසනාවකට හරස් බ්‍රව්සරයක් නොවන බැවින් type=numberඔබට මෙම ඊතල සැඟවිය යුතු නම් භාවිතා කිරීමට එරෙහිව මම උපදෙස් දෙමි. උදා: දැනට ඒවා ඔපෙරා හි ප්‍රදර්ශනය වන අතර ඔවුන් මෙම ආදාන වර්ගය ක්‍රියාත්මක කරන විට ෆයර්ෆොක්ස්, අයිඊ යනාදියෙහි ප්‍රදර්ශනය කිරීමට පටන් ගනී.

— mgol

වලංගු HTML5 නොවන විකල්ප විසඳුම් සඳහා මට max=සහ min=ගුණාංග භාවිතා කිරීමට අවශ්‍යය . මෙම දඟ පන්දු යවන්නන් ද ඇතුළුව ඔපෙරා ගැන ද ජනතාව සඳහන් කරති. ඔපෙරා සඳහා සෆාරි / ක්‍රෝම් වලට සමාන විසඳුමක් තිබේද? <input>type="text"

— unode

2

input::-webkit-clear-buttonX බොත්තම සඳහා Chrome සතුව ඇත

— aldo.roman.nurena

2

2019 වන විට මෙය ෆයර්ෆොක්ස් හි මට වැඩ කළේ නැත. මෙම විසඳුම මා වෙනුවෙන් වැඩ කළේය: stackoverflow.com/questions/45396280/…

— lwitzel

435

ෆයර්ෆොක්ස් 29 දැනට සංඛ්‍යා මූලද්‍රව්‍ය සඳහා සහය එක් කරයි, එබැවින් දඟ පන්දු යවන්නන් වෙබ්කිට් සහ මොස් පාදක බ්‍රව්සර් තුළ සැඟවීමට ස්නිපටයක් මෙන්න:

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

<input id="test" type="number">

ස්නිපටය පුළුල් කරන්න

— ස්වෙරන්
source

ඇන්ටොන්ජ්ගේ පිළිතුරෙන් 'ආන්තිකය: 0' යනු මා භාවිතා කළ

— දෙයයි

මම එය ආන්තිකය නොමැතිව භාවිතා කළ අතර එය හරි යැයි පෙනේ (2020 මැයි).

— ක්‍රෝරාෆ්

tbh, ඊතල යතුරු අකුරු අක්‍රීය කිරීමේ තේරුම කුමක්ද? එය නැවත පෙළ ක්ෂේත්‍රයකට යෑමට

— addy_sk

type = "number" වලංගු භාවයද එකතු වන අතර ජංගම උපාංගවල එය සාමාන්‍ය යතුරුපුවරුව වෙනුවට අංක යතුරු පෑඩය ඉහළට ඔසවයි.

— swhren

363

කෙටි පිළිතුර:

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

<input type="number" />

ස්නිපටය පුළුල් කරන්න

දිගු පිළිතුර:

පවතින පිළිතුරට එකතු කිරීමට ...

ෆයර්ෆොක්ස්:

ෆයර්ෆොක්ස් හි වර්තමාන අනුවාද වලදී, මෙම මූලද්‍රව්‍යවල ඇති -moz-appearanceදේපලවල (පරිශීලක නියෝජිත) පෙරනිමි අගය වේ number-input. එය වටිනාකමට වෙනස් textfieldකිරීමෙන් දඟ පන්දු යවන්නා effectively ලදායී ලෙස ඉවත් කරයි.

input[type="number"] {
    -moz-appearance: textfield;
}

සමහර අවස්ථාවලදී, දඟ පන්දු යවන්නා මුලින් සැඟවීමට ඔබට අවශ්‍ය විය හැකිය , පසුව හෝවර් / අවධානය යොමු කරන්න. (මෙය දැනට Chrome හි සුපුරුදු හැසිරීමයි). එසේ නම්, ඔබට පහත සඳහන් දෑ භාවිතා කළ හැකිය:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

ස්නිපටය පුළුල් කරන්න

Chrome:

Chrome හි වර්තමාන අනුවාද වල, මෙම මූලද්‍රව්‍යවල ඇති -webkit-appearanceදේපලවල (පරිශීලක නියෝජිත) පෙරනිමි අගය දැනටමත් textfieldඇත. දඟපන්දු යවන ඉවත් කිරීම සඳහා, -webkit-appearanceදේපළ වටිනාකම වෙනස් කළ යුතුය noneමත ::-webkit-outer-spin-button/ ::-webkit-inner-spin-buttonව්යාජ පන්ති (එය -webkit-appearance: inner-spin-buttonපෙරනිමියෙන්).

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

<input type="number" />

ස්නිපටය පුළුල් කරන්න

Chrome margin: 0හි පැරණි අනුවාදවල ආන්තිකය ඉවත් කිරීමට භාවිතා කරන බව පෙන්වා දීම වටී .

දැනට, මෙය ලිවීමේදී, 'අභ්‍යන්තර-භ්‍රමණය-බොත්තම' ව්‍යාජ පන්තියේ පෙරනිමි පරිශීලක නියෝජිත මෝස්තරය මෙන්න:

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

— ජොෂ් ක්‍රොසියර්
source

14

මම මෙම පිළිතුරට වඩා කැමතියි එයට අදාළ ෆයර්ෆොක්ස් තොරතුරු ඇතුළත් බැවින් යමක් සංවර්ධනය කිරීමේදී සලකා බැලිය යුතුය. වෙනත් බ්‍රව්සර් එන්ජින් නොසලකා හරින

— වෙබ්කිට්

ෆයර්ෆොක්ස් විසඳුමට වැදගත්! }

— සජාඩ් සදෙරි

"ඊ" අක්ෂරය තවමත් යතුරු කළ හැකිය, අමුතුයි.

— addy_sk

@addy_sk - එයට හේතුව විද්‍යාත්මක අංකනයයි (එනම්, 1.314E+10=> 13140000000).

— ජොෂ් ක්‍රොසියර්

128

අනුව ජංගම සෆාරි සඳහා ඇපල් සමාගමේ අත්දැකීමක් කේතනය මඟ පෙන්වීමක් , ඔබ iPhone බ්රවුසරයේ සංඛ්යාත්මක යතුරු පුවරුව ප්රදර්ශනය කිරීමට පහත සඳහන් භාවිතා කළ හැකිය:

<input type="text" pattern="[0-9]*" />

ඒ patternපිළිබඳ \d*කැමැත්ත ද වැඩ.

— team_steve
source

5

ඉහත සඳහන් කරුණු තිබියදීත්, ලබා දී ඇති ගැටළුව සඳහා පරීක්ෂා කළ විසඳුම ඉතා හොඳින් ක්‍රියා කරයි, මම මෙම විසඳුම වෙත මාරු වීමට තීරණය කළෙමි. එක් හේතුවක් නම්, උදා: ඔපෙරා බ්‍රව්සරයේ ඊතල ද පෙන්වන අතර එය ඔබ ද වැළැක්විය යුතුය. දෙවනුව, මම ක්‍රෝම් 17 හි විශාල ගැටළු නිරීක්ෂණය කළෙමි. එහිදී, එක් අතකින්, 'මැක්ස්ලන්' ගුණාංගය තවදුරටත් ක්‍රියාත්මක වන බවක් නොපෙනේ; ඔබට එහි කැමති තරම් අක්ෂර ඇතුළත් කළ හැකිය. අනෙක් අතට, නිශ්චිත දිග ඉක්මවා යන සංඛ්‍යා සරලව වටකුරු වේ. "IOS උපාංගයක අංක පෑඩ් විවෘත කිරීම" සඳහා මෙම විසඳුම භාවිතා කිරීම මට ආරක්ෂිත බව පෙනේ.

— ජනවාරි

මම මෙම විසඳුම් සමඟ ගියෙමි, මා ටයිප් කරන විට ආදාන ක්ෂේත්‍රයේ අංකය සැකසූ ජේඑස් කිහිපයක් ඇති අතර එය සංඛ්‍යා ක්ෂේත්‍රයක් සමඟ ක්‍රියා නොකරයි. ඉතින් මේ කෙනා වැඩ කළේ චාම් එකක් වගේ.

— ටොකිමොන්

19

මෙය දැනට සියලුම බ්‍රව්සර් වල ඇන්ඩ්‍රොයිඩ් හි කිසිවක් නොකරයි. ඇන්ඩ්‍රොයිඩ් 4.2 හි බ්‍රව්සර් 4.2.2, ක්‍රෝම් 28 සහ ෆයර්ෆොක්ස් 23 හි මෙම පරීක්ෂණ පිටුවේ පරීක්ෂා කර ඇත. මෙම බ්‍රව්සර් මෙම සලකුණු කිරීම සමඟ සම්මත පෙළ යතුරු පුවරුව පෙන්වයි.

— රෝරි ඕ'කේන්

3

ඇන්ඩ්‍රොයිඩ් සහ iOS යන දෙකටම හොඳ විසඳුමක් මෙන්න: stackoverflow.com/a/31619311/806956

— ආරොන් ග්‍රේ

1

A ආරොන් ග්‍රේ නැවත වර්ග එකකට ගියත්: එම විසඳුමට ඩෙස්ක්ටොප් එක සඳහා දඟ පන්දු යවන්නන් සිටී.

— අමුතු විල්

40

input type="tel"ඒ වෙනුවට භාවිතා කිරීමට උත්සාහ කරන්න . එය අංක සහිත යතුරු පුවරුවක් මතු කරයි, එය භ්‍රමණය වන පෙට්ටි පෙන්වන්නේ නැත. එයට JavaScript හෝ CSS හෝ ප්ලගීන හෝ වෙනත් කිසිවක් අවශ්‍ය නොවේ.

— මර්ට් ඩොකාන්
source

17

මෙම විසඳුම දැනට කිසිදු බ්‍රව්සරයක වලංගු කිරීමක් type=numberනොකරයි.

— පෙපිජන්

5

මෙම දුරකථන යතුරු පුවරුව ලෙස හොඳ ලෙස නොවේ සංඛ්යාව යතුරු පුවරුව එය වඩා වඩා හොඳ වුවත්, පෙළ යතුරු පුවරුව . දුරකථන යතුරුපුවරුවේ අංක යතුරු පුවරුවෙන් ඉවත් කර ඇති අදාළ නොවන අකුරු සහ සංකේත ඇත. ( ඇන්ඩ්‍රොයිඩ් 4.2 හි මෙම පිටුව සමඟ පරීක්ෂා කර ඇත.)

— රෝරි ඕ'කේන්

16

"නැත." දුරකථන පුවරුවේ: - <

— gion_13

1

Ory RoryO'Kane සංඛ්‍යා යතුරුපුවරුවේ විශාල අවාසියක් ඇත, එය තදින් සංඛ්‍යාවක් නොවන ඕනෑම ආදානයක් ප්‍රතික්ෂේප කරයි.

— ජොචෙම් කුයිපර්ස්

4

මෙය විසඳුමක් නොවන අතර HTML5 ප්‍රමිති අනුව එහි මෝඩය. ආදානය [දුරකථන] දුරකථන අංක සඳහා වන අතර, ආදාන [අංකය] යනු පාවෙන ලක්ෂ්‍ය ඇතුළු සාමාන්‍ය සංඛ්‍යා සඳහා ය. එබැවින් මෙය කිසිසේත්ම විසඳුමක් නොවේ.

— වාසිල් පොපොව්

18

අංක ආදානය මත දඟ පන්දු යවන්නා ඉවත් කිරීමට පමණක් මෙම CSS එකතු කරන්න

/* For Firefox */

input[type='number'] {
    -moz-appearance:textfield;
}



/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

— සංජිබ් දෙබ්නාත්
source

කැනියස් අනුව input[type=number]{ -webkit-appearance }ක්‍රෝම් සඳහා ප්‍රමාණවත් විය යුතුය, නමුත් ඇත්ත වශයෙන්ම ඔබ ව්‍යාජ මූලද්‍රව්‍ය වෙනස් කළ යුතුය. කිසියම් අදහසක් ඇයි ??

— oldboy

9

මට මෙම ගැටලුව a input[type="datetime-local"]හා සම්බන්ධ වී ඇති අතර එය මෙම ගැටලුවට සමානය.

මේ ආකාරයේ ගැටළු මඟහරවා ගැනීමට මම ක්‍රමයක් සොයාගෙන ඇත්තෙමි.

පළමුව, ඔබ "DevTools -> සැකසීම් -> සාමාන්‍ය -> මූලද්‍රව්‍ය -> පරිශීලක නියෝජිත සෙවනැලි DOM පෙන්වන්න" මඟින් ක්‍රෝම්හි සෙවන-මූල ලක්ෂණය සක්‍රිය කළ යුතුය.

එවිට ඔබට සෙවනැලි සහිත DOM මූලද්‍රව්‍ය සියල්ලම දැකිය හැකිය , නිදසුනක් ලෙස, <input type="number">සෙවනැලි DOM සහිත සම්පූර්ණ අංගය:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

ස්නිපටය පුළුල් කරන්න

මෙම තොරතුරු වලට අනුව, osh ජොෂ් පැවසූ පරිදි, අනවශ්‍ය මූලද්‍රව්‍ය සැඟවීමට ඔබට සමහර CSS කෙටුම්පත් කළ හැකිය.

— ෂියාඕ හන්යූ
source

5

මම භාවිතා කරමින් සුපිරි සරල විසඳුමක් සොයා ගත්තා

<input type="text" inputmode="numeric" />

මෙය බොහෝ බ්‍රව්සර් සඳහා සහය දක්වයි: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

— youjin
source

1

මෙම විසඳුම සමඟ type="number"ආදාන තුළ අකුරු, සංකේත ආදිය ටයිප් කිරීමේ හැකියාව අක්‍රීය කිරීම.

— dankal444

මෙය හරියටම නිවැරදි පිළිතුරයි! පෙළ ක්ෂේත්‍රයක ගුණාංග රඳවා ගනිමින් සංඛ්‍යාත්මක ආදාන පෑඩ් සක්‍රීය කරයි.

— බ්‍රැඩ්

4

ඔබ ඉල්ලූ දේ නොවේ, නමුත් මම මෙය කරන්නේ ස්පින්බොක්ස් සහිත වෙබ්කිට් හි අවධානය යොමු කිරීමේ දෝෂයක් නිසා ය:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

එය ඔබට අවශ්‍ය දේට උදව් කිරීමට අදහසක් ලබා දෙනු ඇත.

— ගෞරව්
source

මෙය මා කතා කළේ හරියටම නොවේ, නමුත් HTML5 හි ප්‍රමිතිකරණයේ වර්තමාන lack නතාවය හේතුවෙන් මෙය ඉදිරිපත් කළ හොඳම විසඳුමයි. ඩෙස්ක්ටොප් එකට වඩා ජංගම සඳහා වෙනත් වෙබ් අඩවියක් සැපයීම (එය ක්‍රියාත්මක කරන ආකාරය කුමක් වුවත්) මෙය දැනට ඉටු කර ගත හැකි එකම ක්‍රමය ලෙස පෙනේ. කෙසේ වෙතත් මට සිදු වූයේ මූලද්‍රව්‍යයේ පිටපතක් සාදා DOM වෙත එක් කිරීමට පෙර 'වර්ගය' අගය වෙනස් කිරීමයි. මූලද්‍රව්‍යය ඩොමයට එකතු කළ පසු ආදාන වර්ගය වෙනස් කිරීමට IE ඉඩ නොදේ.

— ඇලන්

4

මූසිකය උඩින් සහ නැතිව මූසිකය මත යෝජනා කිරීමට වඩා හොඳ පිළිතුර මෙයයි

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }

— Swap-IOS-Android
source

ඉටු කරන්නේ margin: 0කුමක්ද? ද, මෙම spin-buttonව්යාජ අංග මගින් මුලපුරනු බව පෙනේ කරයට hoverනව බ්රව්සරයන් තුළ?

— oldboy

3

සෆාරි හි මෙම කාර්යය සිදු කිරීම සඳහා, වෙබ්කිට් ගැලපුමට වැදගත් වන පරිදි එකතු කිරීම මට හමු විය.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

ඔපෙරා සඳහා ද විසඳුමක් සකස් කිරීමට මට තවමත් ගැටලුවක් තිබේ.

— වාසනාව
source

3

උබුන්ටු සඳහා ෆයර්ෆොක්ස් හි, භාවිතා කිරීම

    input[type='number'] {
    -moz-appearance:textfield;
}

මට උපක්‍රමය කළා.

එකතු කිරීම

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

මාව මෙහෙයවනු ඇත

නොදන්නා ව්‍යාජ පංතිය හෝ ව්‍යාජ මූලද්‍රව්‍යය '-වෙබ්කිට්-පිටත-භ්‍රමණය-බොත්තම'. නරක තේරීම් කාරකය නිසා රූල්සෙට් නොසලකා හරින ලදි.

මම උත්සාහ කළ සෑම අවස්ථාවකම. අභ්යන්තර භ්රමණය බොත්තම සඳහා සමාන වේ.

— sonny_boy
source

1

-webkit-*ක්‍රෝම් -moz-*සඳහා වන අතර මොසිල්ලා ෆයර්ෆොක්ස් සඳහා වේ. එය ඔබට වැඩ නොකළේ එබැවිනි.

— ගුස්ටාව් ගිල්

3

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;

<input id="test" type="number">

ස්නිපටය පුළුල් කරන්න

— ෂර්මා කුමරු
source

6

මෙම පිළිතුර දැනටමත් කිහිප වතාවක් ලබා දී ඇත. නව එකක් අනුපිටපතක් නම්, නව එකක් ලබා දීමට පෙර පවතින පිළිතුරු කියවීමට එය උපකාරී වේ.

— ඩෑන් ඩස්කල්ස්කු

2

ඔබට දඟ පන්දු යවන්නෙකු අවශ්‍ය නොවන විට ජාවාස්ක්‍රිප්ට් සමඟ සංඛ්‍යා ආදානය පෙළ ආදානයට වෙනස් කරන්න;

document.getElementById('myinput').type = 'text';

පරිශීලකයා පෙළ ඇතුළත් කිරීම නවත්වන්න;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

ඔබට දඟ පන්දු යවන්නෙකු අවශ්‍ය නම් ජාවාස්ක්‍රිප්ට් එය නැවත වෙනස් කරන්න;

document.getElementById('myinput').type = 'number';

එය මගේ අරමුණු සඳහා හොඳින් ක්‍රියාත්මක විය

— user3121518
source

2

මට මෙය වැඩ කිරීමට අවශ්‍ය විය

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

අමතර රේඛාව appearance: noneමට වැදගත් විය.

— Vic
source

2

වෙබ්කිට් සහ බ්ලින්ක් මත පදනම් වූ බ්‍රව්සර් සහ සියලුම ආකාරයේ බ්‍රව්සර් පහත සඳහන් CSS භාවිතා කරන්න:

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

— සබ්බීර් හොසෙන් චෞද්රි
source

කුමන බ්‍රව්සර් භාවිතා webkitකරන්නේද? දැනට පවතින පිළිතුරු දහහතරක් සමඟ අවුරුදු නවයක් පැරණි ප්‍රශ්නයකට පිළිතුරු සපයන විට, ඔබේ පිළිතුර ක්‍රියාත්මක වන්නේ කෙසේද සහ ඇයි යන්න පිළිබඳ පැහැදිලි කිරීමක් එක් කිරීම සහ එය පිළිතුරු සපයන ප්‍රශ්නයේ නව පැතිකඩ කුමක්ද යන්න සඳහන් කිරීම වැදගත්ය.

— ජේසන් ඇලර්