input text唤起英文输入键盘

Question

现在有个
<input type="text" />

我写了一些样式，现在的需求是，用手机点击输入框的时候，强行唤起英文输入键盘，该怎么弄?

另外
我下面有个<div class = "btn"></div>
怎么 当上面输入框无输入内容的时候默认为 灰色，，然后有内容的时候变成黄色

Answer 1

IE 和 Firefox 可以用 ime-mode: disabled，但是 Chrome 似乎并没有打算支持
See https://developer.mozilla.org/en-US/docs/Web/CSS/ime-mode

因为 password 就可以默认英文输入法，我写了个 demo，用 password 模拟的(手机端还不错，桌面端不能显示光标。。)
https://codepen.io/yangg/pen/qNxrqo

Answer 2

我记得默认好像是英文输入键盘吧，如果不是可以设置成这样

<input type="text" autocapitalize="on"/>

Answer 3

stackoverflow上有类似问题，可以看看
http://stackoverflow.com/questions/9284041/force-users-to-type-with-english-keyboard-in-input-text-field

Answer 4

自己写了个方法,聚焦时改变input的type为url，调用英文键盘，失焦时又改回text，由于用户可能自己切换输入法，所以再判断一下输入中文的情况。

<input type="text" class="no-ime">


$(".no-ime").focusin(function(){
    $(this).attr("type","url");
});
$(".no-ime").focusout(function(){
    $(this).attr("type","text");
});
$(".no-ime").on("input", function(){
    var that = $(this);
    var val = that.val();
    var expression = /[\u4E00-\u9FA5]/;
    var rep = new RegExp(expression);
    if(rep.test(val)){
        alert("请使用拼音输入！");
        that.val("");
    }
});