开发者

Tabbulation in an <input /> tag?

开发者 https://www.devze.com 2023-01-31 16:43 出处:网络
Is it possible to insert a tabbulation character into 开发者_如何学JAVAan input element? The task: i have one input, the user types 6 characters, which must look like:3 characters [empty space] 3 cha

Is it possible to insert a tabbulation character into 开发者_如何学JAVAan input element?

The task: i have one input, the user types 6 characters, which must look like:

3 characters [empty space] 3 characters.

The problem: the left position of the second 3 characters must not change.

For example:

looks:

   MMM [ ] OPS

   III [ ] DOS

must look:

   MMM [ ] OPS

   III [       ] DOS

There must be no manipulation with the font-type.

ty


It makes no sense to me why one would have to align the input ... but I can think of a number of alternative solutions that may make sense depending on what the actual stated requirements are (i.e. what is the reason the input has to be aligned)

You could have a 6 char field (or 7 and include the space) with a "preview" to the right (or below, whatever) that formats and aligns the two 3-char codes as you type in the input field.

You could have two separate input fields, and use javascript to auto-tab between them as you type (tab right when full) or backspace (tab left when field 2 is empty)

You could also use javascript to automatically insert a tab (\t) in your field after 3 chars are typed, or when a space is typed replace it with a tab.

The approach I'd use depends entirely on what the field(s) and 3-letter codes are and why they're being input at this time. For a fixed set of codes I might use select lists instead of input.


Yea, insert a tab character "\t". You can copy-pasta it from a text editor, or use javascript to detect the tab key and use it to insert a tab char. Be careful how you override default behaviors though, as the tab key is used for accessibility purposes.


You can use the \t character escape within the input value:

$(document).ready(function() {
    $("#text1").val("MMM\tOPS");
    $("#text2").val("III\t\tOPS");
});

Note, however, that I had to use one tabulation character in the first text box and two tabulation characters in the second text box in order to properly align the result.

0

精彩评论

暂无评论...
验证码 换一张
取 消