轻松一个!我只想在电话号码输入字段中输入数字。我如何在简单的js中做到这一点

Posted

技术标签:

【中文标题】轻松一个!我只想在电话号码输入字段中输入数字。我如何在简单的js中做到这一点【英文标题】:Easy one! I want only numbers to be entered in the phone number input field. How do I do that in simple js 【发布时间】:2022-01-01 19:25:30 【问题描述】:

在电话号码输入框中只输入数字。代码如下。另外,我希望用户在名称输入框中只输入文本。请帮助使用简单的 js ............................................. ..................................................... ....................

<!DOCTYPE html>
<html>
    <head>
        <title>Navya Malhotra - Contact Us</title>
        <link rel="stylesheet" href="styles/style.css" type="text/css">
        <link rel="stylesheet" href="styles/contact.css" type="text/css">
        <script>
            var h2 = document.getElementById('h2')
            function setValue(e, el) 
                var element = document.getElementById(el)
                element.innerHTML = e;
            
            
        </script>
    </head>
    <body>
        <div class="navbar">
            <div class="title">
                <p><span style="font-size: 50px;">N</span>avya <span style="font-size: 50px;">M</span>alhotra</p>
            </div>
            <div class="main-menu">
                <ul>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="products.html">Products</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                
                </ul>
            </div>
            <div class="nav_links">
                <ul>
                    <li><a href="https://youtube.com"  target="_"><img src="pics/Youtube.png"  style="height: 45px;"></a></li>
                    <li><a href="https://www.instagram.com/navya_malhotra_01/" target="_1"><img src="pics/Instagram.png"  style="height: 33px;"></a></li>
                    <li style="margin-top: 32px;"><a href="https://facebook.com" target="_2"><img src="pics/Facebook.png"  style="height: 29px;"></a></li>
                </ul>
                
            </div>
        </div>
        <p class="home_title"><span style="font-size: 40px;">C</span>ontact <span style="font-size: 40px;">U</span>s</p>    
        <form action="" class="contact_form">
            <input type="text" class="input_fields" pattern=".8," required placeholder="Full Name" id="fullname"/>
            <input type="email" class="input_fields" required pattern=".13," placeholder="Your Email"/>
            <input type="text/number" pattern=".10,10" class="input_fields" required placeholder="Phone number (+91)"/>
            <select class="dropdown" id="dropdown" onchange="setValue(this.value, 'h1')" >
                <option value="feedback">Feedback</option>
                <option value="review">Review</option>
                <option value="query">Query</option>
                <option value="complain">Complaint</option>
                <option value="custom">Custom</option>
            </select>
            <textarea class="text_area" cols="39" rows="8" minlength="50" maxlength="350" required placeholder="Your Review"></textarea>
            <input type="submit" class="submit_button" id="submit_button"/>
            
        </form>   
        <h1 id="h1"></h1>
        <h1 id="h2"></h1>

    </body>
    
</html>

【问题讨论】:

【参考方案1】:

代替

<input type="text/number" pattern=".10,10" class="input_fields" required placeholder="Phone number (+91)"/>

您可以使用type="number",它只接受数字作为您的输入。

<input type="number" pattern=".10,10" class="input_fields" required placeholder="Phone number (+91)"/>

【讨论】:

以上是关于轻松一个!我只想在电话号码输入字段中输入数字。我如何在简单的js中做到这一点的主要内容,如果未能解决你的问题,请参考以下文章

如何将 uitextfield 字符范围限制为 10 位

用户离开字段后验证字段

我如何用Yup验证Material-UI-电话号码?

MVC TextBoxFor的输入字段中只有4位数字

每当我输入内容时组件都会重新渲染,但我只想在按钮的 onClick 之后重新渲染

在输入文本字段中禁用键盘