一起使用必需和只读属性

时间:2015-04-28 15:18:37

标签: html5 button onclick readonly required

我正在创建HTML5网络表单。其中一个输入是地理定位,它通过单击按钮填充(它插入gps坐标)。由于这个输入必须是必需的并且必须是只读的(我不希望用户在里面写自定义数据),如何处理这个? HTML5不允许使用requiredreadonly(这很有意义),但在我的情况下,我需要应用它。你知道任何解决方法吗?

我在这里搜索并搜索了Google和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>

2 个答案:

答案 0 :(得分:7)

可以使用jquery validate plugin来实现..或者更容易:

一定不能把它挂在你要求点击的事件上......

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

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

答案 1 :(得分:2)

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

在此textBox用户中,除了输入requiredreadonly之外,无法输入任何内容。