JavaScript 通過 preventDefault() 使 input[type=text] 禁止輸入但保留光标

一、說明

取消事件的預設動作。該方法将通知 Web 浏覽器不要執行與事件關聯的預設動作（如果存在這樣的動作）。例如，如果

type

屬性是

submit

，在事件傳播的任意階段可以調用任意的事件句柄，通過調用該方法，可以阻止送出表單。注意，如果 Event 對象的

cancelable

屬性是

fasle

，那麼就沒有預設動作，或者不能阻止預設動作。無論哪種情況，調用該方法都沒有作用。

二、文法

event.preventDefault()
           

三、示例

3.1 阻止

<a>

元素跳轉

<a rel="nofollow" href="http://www.mazey.net/baby/blog" target="_blank" id="a-prevent">點選我看會不會跳轉</a>
<script>
document.getElementById('a-prevent').addEventListener('click',function(e){
    var eObj = e || window.event;
    eObj.preventDefault();
});
</script>
           

另外可以通過

return false;

來阻止

a

元素跳轉事件。

<script>
    function preventGO(){
        return false;
    }
</script>
<a rel="nofollow" href="http://www.mazey.net/baby/blog/" onclick="return false;">點選我看會不會跳轉1</a><br />
<a rel="nofollow" href="http://www.mazey.net/baby/blog/" onclick="preventGO();">點選我看會不會跳轉2</a><br />
<a rel="nofollow" href="http://www.mazey.net/baby/blog/" onclick="return preventGO();">點選我看會不會跳轉3</a>
           

3.2 禁止

<input>

元素鍵盤輸入

<input type="text" id="input-prevent" placeholder="試試能不能輸入" />
<script>
document.getElementById('input-prevent').addEventListener('keypress',function(e){
    var eObj = e || window.event;
    eObj.preventDefault();
});
</script>