一起使用 required 和 readonly 属性答案

【问题标题】：Using required and readonly attributes together一起使用 required 和 readonly 属性
【发布时间】：2015-07-07 12:51:58
【问题描述】：

我正在创建一个 HTML5 网络表单。其中一个输入用于地理定位，通过单击按钮填充（它插入 gps 坐标）。由于这个输入必须是必需的并且必须是只读的（我不希望用户在里面写入自定义数据），如何处理这个？ HTML5 不允许使用required 和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>

【问题讨论】：

标签： html button onclick readonly required

【解决方案1】：

使用event.preventDefault(); 防止默认行为。

不能是keydown，只需将其挂到您点击时调用的事件...

不要忘记将“事件”添加到函数调用中，这样你就有了。

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

<script>
    $(".readonly").keydown(function(e){
        e.preventDefault();
    });
</script>

【讨论】：

【解决方案2】：

<input type="text" name="name" id="id" required onkeypress="return false;" />

在这个textBox 中，用户不能输入任何内容，只能输入required 和readonly。

【讨论】：