一起使用必需属性和只读属性

2024-01-09

我正在创建一个 HTML5 网络表单。其中一个输入用于地理位置,通过单击按钮(它插入 GPS 坐标)来填充。由于此输入必须是必需的并且必须是只读的(我不希望用户在其中写入自定义数据),因此如何处理这个问题? HTML5不允许使用required and readonly(这是有道理的),但就我而言,我需要应用它。你知道有什么解决方法吗?

我在 SO 和 Google 上搜索了又搜索,但似乎没有人知道解决方案。

这是我的代码的一部分:

    <form class="form-horizontal" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
        <div class="form-group">
            <label class="control-label col-xs-3" for="coord">GPS coordinates:*</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="coord" name="coord" required placeholder="Please enable geolocation service">
            </div>
            <div class="col-xs-3">
                <button type="button" onclick="getLocation()" class="btn btn-primary" id="locate" disabled>Locate me</button>
            </div>
        </div>

Use event.preventDefault(); https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault以防止默认行为。

一定不能是 keydown,只需将其挂到您单击时调用的事件上...

不要忘记将“事件”添加到函数调用中,这样就可以了。

<input type="text" class="readonly" required />

<script>
    $(".readonly").keydown(function(e){
        e.preventDefault();
    });
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

一起使用必需属性和只读属性 的相关文章