代码之家 › 专栏 › 技术社区 › Brainmaniac

将输入字段中输入的空格实时更改为下划线

jquery javascript

Brainmaniac · 技术社区 · 7 年前

我有一个输入字段,它可以将输入的所有空格实时切换为“u”。这意味着当用户点击该输入字段中的空格键时,将显示下划线而不是空格。我对javascript/jquery比较陌生,所以请不要将我的setTimeout-n00bidity判断为hard:

$( "#inputId" ).keydown(function (key){
    var code = key.keyCode || key.which;
    if( code == 32 ) { //Space key code
        $( this ).val(
            function( index, value ){
                return value.substr( 0, value.length - 1 );
        })
        setTimeout(
            function(){
                $(this).val($(this).val() + "_");
            }, 10
        )
    }
})

5 回复 | 直到 7 年前

31piy 7 年前

你可以听 input 事件,然后在侦听器中将空格替换为下划线。这样,就不需要超时。

$("#inputId").on('input', function(key) {
  var value = $(this).val();
  $(this).val(value.replace(/ /g, '_'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="inputId">

com 7 年前

无jquery,简单解决方案:

var input = document.getElementById("inputId");

input.oninput = function (e) {
  e.target.value = e.target.value.replace(' ', '_');
}

<input type="text" id="inputId" />

Barmar 7 年前

使用 keyup 事件而不是 keydown ,只需将所有空格替换为 _ . 这个 弹起 事件在根据用户键入的内容修改值后运行,因此不需要检查 charCode .

$("#inputId").keyup(function() {
    $(this).val(function(i, oldval) {
        return oldval.replace(/ /g, '_');
    });
});

HoangHieu 7 年前

你可以使用 更改键盘输入值 前任:

<div>
    <label>Test:</label>
    <input type="text" id="test">
</div>

$("#test").on("keypress", function (e) {
    if (32 == e.keyCode) {
        e.preventDefault();
        var newString = $("#test").val() + "_";
        $("#test").val(newString);
    }
});

Shiv Kumar Baghel 7 年前

$( "#inputId" ).keyup(function (key){
    var code = key.keyCode || key.which;
    if( code == 32 ) { //Space key code        
       $(this).val($(this).val().replace(/ /g,"_"));
    }
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

5 月前

user28928120 · 如何在jquery中选择所有类?

6 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

6 月前